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在那里。这将为表中的每一行显示为该行分配的角色列表。

我真正需要做的是显示包含角色描述作为每行工具提示的div。我尝试下载并使用jquery工具并设法让它显示工具提示，但它只能在表的第一行工作。每个后续行都不会显示工具提示。看看他们网站上的例子，只有工具提示的例子，一个整个表的值。有人做过我想要实现的目标吗？

非常感谢

Answer 1

当您悬停所述行时，title属性将显示工具提示。如果您想要更可自定义的工具提示，则会有一些jquery / javascript工具提示脚本。

http://jqueryui.com/tooltip/

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

使用：

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

$("#IWantAllTitlesInThisIdAsTooltips").tooltip()

Answer 2

Html.DisplayFor不使用@title参数显示工具提示。而是使用它（附加信息是工具提示）：

 <td>
                    <div id=j>
                        @Html.DisplayFor(modelItem => item.AdditionalInfoShort)
                        </div>

                        <noscript  id=i>@Html.DisplayFor(modelItem => item.AdditionalInfo)</noscript>

                </td>

使用下面的JavaScript方法

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
    $(document).tooltip({
        items: "#j",
        content: function() {
            return $(this).closest('td').children("#i").text();
        }
    });
</script>

Answer 3

    @foreach (var item in Model)
    {
        <tr>
            <td>
                <input type="text" value="@item.ICID" hidden>
                <span title='@item.ICName'>@Html.DisplayFor(modelItem => item.ICName)</span>
            </td>
        </tr>
     }

在Display元素周围应用Span标签，并将工具提示名称传递给Span标签中的title属性。

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

3 个答案: