0

我正在努力获得一个直观的工具提示，以便在我的 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 工具并设法让它显示工具提示，但它只适用于表格的第一行。随后的每一行都不会显示工具提示。查看他们网站上的示例，只有整个表格的工具提示一个值的示例..有没有人完成我想要实现的目标？

非常感谢

4

3 回答 3

2

当您将鼠标悬停在该行时，title 属性将向您显示一个工具提示。如果您想要一个更可定制的工具提示，周围有一些 jquery/javascript 工具提示脚本。

http://jqueryui.com/tooltip/

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

要使用：

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

$("#IWantAllTitlesInThisIdAsTooltips").tooltip()
于 2012-10-18T08:46:43.617 回答
0

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>
于 2015-12-11T19:19:15.377 回答
0 
    @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 标签，并将 Tooltip 名称传递给 Span 标签中的 title 属性。

于 2020-11-02T03:08:35.477 回答