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中的自定義工具提示 - 每行顯示數據

回答

相關問題