javascript - MVC 中表格上的自定义工具提示 - 显示每行数据

Question

我正在努力获得一个直观的工具提示来在我的 MVC 应用程序中每行显示。

   @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。这会为表中的每一行显示分配给该行的 Angular 色列表。

我真正需要做的是显示这个包含 Angular 色描述的 div 作为每行的工具提示。我尝试下载并使用 jquery 工具并设法让它显示工具提示，但它只适用于表格的第一行。随后的每一行都不会显示工具提示。查看他们网站上的示例，只有整个表格的工具提示一个值的示例。有没有人完成了我想要实现的目标？

非常感谢

Answer 1

当您将鼠标悬停在该行时，标题属性将显示一个工具提示。如果您想要一个更可自定义的工具提示，可以使用一些 jquery/javascript 工具提示脚本。

http://jqueryui.com/tooltip/

Jquery ui 工具提示是一个非常容易实现的工具提示，并且有很多自定义行为的选项。

使用:

1:获取jquery ui和jquery脚本或cdn链接并放入您的页面上2:为每个需要工具提示的元素设置标题以及工具提示内容3:使用jquery选择器找到您想要工具提示显示的元素4:使用选择器上的工具提示功能

$("#IWantAllTitlesInThisIdAsTooltips").tooltip()