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

我创建了一个仅显示表的页面。我正在寻找使用Bootstrap创建工具提示的方法，当用户将鼠标放在某个单元格上时，该工具将被触发。

我的页面上有类似的东西：

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

我如何在此处使用工具提示引导程序？

首先，您需要添加相应的 bootstrap.css and 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。

让我知道这是否有帮助。

相关内容

最新更新

热门标签：