Добавить список информации в подсказку

В настоящее время у меня есть сетка, в которой есть всплывающие подсказки, так что, когда число зависает, всплывающая подсказка отображается с некоторым текстом.Добавить список информации в подсказку

Я создал всплывающую подсказку, установив заголовок тега <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, в частности, скрывает эти подсказки примерно через 20 секунд (или, по крайней мере, используется), и вам нужно перейти и показать еще один, чтобы вернуть его. Используйте плагин для всплывающей подсказки (быстрый google для плагина подсказки jquery) или, как вы отметили этот бутстрап, просто используйте bootstrap! http://getbootstrap.com/javascript/#tooltips –

После добавления кода: Ну, вы * можете * сделать это именно так: просто добавьте кавычки и знак @: ' ' –

я понял, что я не отправлял решение этой проблемы. В конце концов я решил его использовать синтаксис бритвы, чтобы прокрутить каждого пользователя в списке и добавить новые строки со следующим именем пользователя в строку на каждой итерации. Затем это печатается в заголовке ячейки.

@*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. Извините за путаницу. –

Добавить список информации в подсказку

ответ

Смежные вопросы