Question

我创建了一个只显示表格的页面。我正在寻找创建带有引导程序的工具提示的方法，当用户将鼠标放在某个单元格上时会触发该工具提示。

我的页面上有类似内容：

foreach(var item in @Model)
{
   <tr><td>item.Total</td></tr>
}

我如何在这里使用工具提示引导程序？

Answer 1

首先，您需要添加相应的 bootstrap.css 和 bootstrap.js 文件，并引用这些文件（您可能已经完成此操作，但是问题没有说明）。

然后，添加您提供的内容：

<head>
  <title>Bootstrap ToolTip Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <table>
        <tr>
            <th>Total</th>
        </tr>

        foreach(var item in @Model)
        {
            if(string.IsNullOrWhiteSpace(item.ToString())
            {
                <tr>
                    <td>
                        item.Total
                    </td>
                 </tr>
            }
            else
            {
                <tr>
                    <td title="This is a title" data-toggle="tooltip">
                        item.Total
                    </td>
                </tr>
            }
        }
    </table>

    <script>
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip(); 
        });
    </script>

</body>

这是一个提供视觉效果的JSFiddle。

如果有帮助，请告诉我。

如何在MVC中的表格单元格上创建鼠标悬停事件的引导工具提示？

1 个答案: