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

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

jquery asp.net-mvc twitter-bootstrap

Jquery 如何在MVC中的表格单元格上创建鼠标悬停事件的引导工具提示？,jquery,asp.net-mvc,twitter-bootstrap,Jquery,Asp.net Mvc,Twitter Bootstrap,我创建了一个只显示一个表的页面。我正在寻找一种方法来创建一个带有引导的工具提示，当用户将鼠标放在某个单元格上时会触发该提示我的页面上有类似的内容： foreach(var item in @Model) { <tr><td>item.Total</td></tr> } foreach（@Model中的变量项） { 项目.总计 } 如何在此处使用工具提示引导？首先，您需要添加相应的bootstrap.css和bootstrap.js文件

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

我的页面上有类似的内容：

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

foreach（@Model中的变量项）
{
项目.总计
}

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

首先，您需要添加相应的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>


引导工具提示示例
全部的
foreach（@Model中的var项）
{
if（string.IsNullOrWhiteSpace（item.ToString（））
{
项目.总计
}
其他的
{
项目.总计
}
}
$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
});

下面是一个提供视觉效果的示例

让我知道这是否有帮助。

谢谢。这会显示每个总单元格的工具提示。但有些单元格是空的。如何修改它，使工具提示仅显示其中包含数据的单元格？如果有助于解决问题，请将答案标记为已接受。