0

MVCアプリケーションで1行ごとに表示する直感的なツールチップを取得するのに苦労しています。

   @foreach (var item in Model)
{

    int countSDOL = (item.sdolDetails.Count(i => i.userid == item.id));
    int workFlow = (item.workflows.Count(i => i.actionOutstanding == true));     
    @Html.HiddenFor(modelItem => item.id)
    <tr style="@(workFlow > 0 ? "Background-color:#87BEF5" : "")">
    <td>
         @if (workFlow > 0)
            {     

                <button id="quickButton" class="classname" value="@item.id" data-task-id="@item.id">Actions</button>
            }
    </td>
    <td>
             <div class="tooltip">
               @foreach (var role in item.userRoles)
               {
                    <div title="">
                    @Html.DisplayFor(roles => role.role.roleDescription) 
                    </div>
               }                        
          </div>  
     </td>
      <td>
            @Html.DisplayFor(modelItem => item.title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.forename)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.surname)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.employeeNumber)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.sdolInitiation)
        </td>
        <td align="center">
            @if (item.trainingTrackerPassed.Equals(true))
            {
                <img src="../../Content/tick.png" />
            }
            else
            {
                <img src="../../Content/cross.PNG" />
            }
        </td>
        <td align="center">
        @if (item.userValid.Equals(true))
        {
                <img src="../../Content/tick.png" />
        }
        else
        {
                <img src="../../Content/cross.PNG" />
        }

        </td>
        <td align="left">
            @Html.ActionLink("Details", "Details", new { id = item.id }) |
            @Html.ActionLink("Roles", "Index", "Roles", new { id = item.id }, null) |
           @if (countSDOL == 0)
           {
            @Html.ActionLink("SDOL", "Create", new { id = item.id }, null)                                       
           }
           else
           {
            @Html.ActionLink("SDOL", "Sdol", new { id = item.id }, null)   
           }        
        </td>
        <td>
         <a id="download_now">show</a>   
        </td>
    </tr>

}

上記は私の見解です。そこにネストされた@foreachに注目してください。これにより、テーブルの各行に、その行に割り当てられたロールのリストが表示されます。

私が本当にする必要があるのは、行ごとのツールチップとしてroledescriptionsを含むこのdivを表示することです。jqueryツールをダウンロードして使用してみたところ、ツールチップが表示されるようになりましたが、テーブルの最初の行でしか機能しませんでした。後続の各行にはツールチップは表示されません。彼らのサイトの例を見ると、テーブル全体のツールチップ1つの値の例しかありません..誰かが私が達成しようとしていることをしたことがありますか？

どうもありがとう

4

3 に答える 3

2

title 属性は、上記の行にカーソルを合わせるとツールチップを表示します。よりカスタマイズ可能なツールチップが必要な場合は、jquery/javascript ツールチップ スクリプトがいくつかあります。

http://jqueryui.com/tooltip/

Jquery ui ツールチップは非常に簡単に実装できるツールチップであり、動作をカスタマイズするための多くのオプションがあります。

使用するには:

1: jquery ui および jquery スクリプトまたは cdn リンクを取得し、ページに配置します 2: ツールチップのコンテンツを含むツールチップを必要とする各要素のタイトルを設定します 3: jquery セレクターを使用して、ツールチップを表示する要素を見つけます 4 : セレクターでツールチップ機能を使用する

$("#IWantAllTitlesInThisIdAsTooltips").tooltip()
于 2012-10-18T08:46:43.617 に答える