在工具提示中添加一個信息列表

我目前有一個網格，它有工具提示，當一個數字懸停時，工具提示會顯示一些文字。在工具提示中添加一個信息列表

我已創建工具提示，方法是設置<a>標記的標題。但是，在我的工具提示中，我想在工具提示中顯示與數字相關的信息列表。

我該怎麼做呢？我嘗試循環通過標題標籤內的數組沒有成功（如果這有效，我會感到驚訝）。

代碼：

@{var grid = new WebGrid(Model.ModelName, canSort: false); } 

      <hr /> 
      <div class="panel panel-default pre-scrollable"> 
       <table class="table table-striped table-bordered table-responsive table-condensed table-hover"> 
        <thead> 
         <tr> 
          <th>header1</th> 
          <th>header2</th> 
          <th>header3</th> 
          <th>header4</th> 
          <th>header5</th> 
          <th>header6</th> 
         </tr> 
        </thead> 
        @foreach (var item in Model.ModelName) 
        { 
         <tr> 
          <td> 
           @item.SomeValue1 
          </td> 
          <td> 
           @item.SomeValue2 
          </td> 
          <td> 
           @item.SomeValue3 
          </td> 
          <td> 
           @if (@item.Response.Item1 != 0) 

           { 
           @*Print the items in list into tooltip*@ 
           <a title= @foreach (string name in item.List) { name.ToString() } >@item.Response.Item1</a> 
           } 
           else 
           { 
            @item.Response.Item1 
           } 
          </td> 
          <td> 
           @item.Response.Item2 
          </td>s 
          <td> 
           @item.Response.Item3 
          </td> 
         </tr> 
        } 
       </table> 
      </div>

來源

2016-02-10 Ben

顯示您的代碼。 –

使用'title ='製作的工具提示只能是純文本。它也受到瀏覽器的控制 - 因此您無法確定它的樣式或位置，甚至無法確定它顯示的時間長度;特別是IE在大約20s後隱藏了這些工具提示（或者至少已經習慣了），你必須移動並顯示另一個才能恢復。使用工具提示插件（快速谷歌爲jQuery的工具提示插件），或者，因爲你已經標記了這個引導，只需使用bootstrap！ http://getbootstrap.com/javascript/#tooltips –

添加代碼後：你可以這樣做 - 只需加引號和@符號：'' –

，我意識到我沒有張貼解決這個問題。最終，我使用razor語法解決了這個問題，以循環遍歷列表中的每個用戶，並在每次迭代時將新行添加下一個用戶名稱作爲字符串。然後打印在單元格標題中。

@*Initialise a new string for each table row*@ 
@{string sDeclined = null;} 

@*Loop through each user in list*@ 
@foreach (var user in item.DeclinedList) 
{ 
    @*Append a new line and the current user to the string of users*@ 
    sDeclined = sDeclined + "\n" + user; 
} 

@*Set the title as the string of users*@ 
<td title="@sDeclined"> 
    @item.Response.Item2 
</td>

來源

2016-06-05 21:04:42 Ben

試試這個：

<a title="@String.Join("\n", item.List.ToArray())">@item.Response.Item1</a>

來源

2016-02-10 16:47:41 McCee

有很多框架，可以實現更強大的工具提示。 jQuery的有一個非常簡單的一個，其可以在這裏找到：http://jqueryui.com/tooltip/

<!doctype html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>Tooltip</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="http://code.jquery.com/jquery-1.12.0.js"></script> 
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script> 
    $(function(){ 
    $(document).tooltip(
     { 
     content:function(){return $(this).attr('title');}, 
    } 
    ); 
    }); 
    </script> 
</head> 

<body> 

<p> 
    <a href="#" title="Here is a list<ul><li>Item 1</li><li>Item 2</li></ul>">Here</a> is a tooltip that conatins a list 
</p> 
</body> 
</html>

這裏是工作提琴：https://jsfiddle.net/x5uw4cfy/

來源

2016-02-10 16:56:28

感謝您的迴應，我嘗試了您建議的錨標記，但它不會編譯爲有效的html。 html列表標籤似乎不包含在字符串中。 – Ben

JSFiddle不適合你嗎？ https://jsfiddle.net/x5uw4cfy/當你說沒有編譯。你的意思是它不會對驗證器進行驗證嗎？ –

對不起，因爲你原本不包括剃刀語法，我認爲這是一個前端HTML問題。對困惑感到抱歉。 –

在工具提示中添加一個信息列表

回答

相關問題