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

我正在努力获得直观的工具提示，以便在我的MVC应用程序中按行显示。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工具，并设法让它显示一个工具提示，但它只会在表的第一行工作。每个后续行都不会显示工具提示。看他们的网站上的例子，只有工具提示一个值的整个表的例子..有没有人做了我想要实现的？

非常感谢

来源

2012-08-31 bruceiow

只是把标题上的每一行 – IamStalker

HTML已建成提示=“工具提示”使用所有你需要做的就是将标签的title属性设置为@IamStalker已经指出的。 – dqhendricks

，当你将鼠标悬停在说行。如果你想要一个更可自定义的工具提示title属性会显示一个提示..，也有少数的jQuery/JavaScript的脚本提示周围。

http://jqueryui.com/tooltip/

jQuery UI的提示是非常容易实现的工具提示，并有很多的选项来定制行为。

要使用：

1：获得jQuery UI的和jQuery脚本或CDN链接，并在您第2页：设置一个标题为每个元素需要与提示内容 3提示：使用jQuery选择以找到您想要的工具提示上显示 4的元素：使用工具提示功能上的选择

$("#IWantAllTitlesInThisIdAsTooltips").tooltip()

来源

2012-10-18 08:46:43 Tsasken

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-11 19:19:15

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

回答

相关问题