将信息列表添加到工具提示中

本文关键字：工具提示 添加 信息 列表 | 更新日期: 2023-09-27 18:34:13

我目前有一个网格，其中包含工具提示，因此当将鼠标悬停在数字上时，会显示带有一些文本的工具提示。

我通过设置<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>

将信息列表添加到工具提示中

我

意识到我没有发布这个问题的解决方案。最终，我使用 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>

试试这个：

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

有许多框架可以实现更强大的工具提示。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/

相关文章：