Question

我目前有一个网格，其中包含工具提示，以便在数字悬停时，会显示带有一些文字的工具提示。

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

Answer 1

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

Answer 2

试试这个：

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

Answer 3

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

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

3 个答案: