让我们使用一个示例来展示如何将工具提示添加到文档中的任何HTML元素中。
注意:
如果在将这些工具提示示例放入页面时它们不起作用，那么您将遇到另一个问题。你需要考虑以下几点:
The order of scripts being included
See if you are trying to initialize HTML elements that have been removed
See if you are trying to call methods in JS files you are no longer including
See if you are including the JS file that provides the functionality you need (not just for tooltips, but any components you use on the page).
<head>
<link rel="stylesheet" href="/Content/bootstrap.css" />
<link rel="stylesheet" href="/Content/animate.css" />
<link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
... your HTML code ...
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
... your JavaScript initializers ...
</body>
上述任何一项的失败都可能(而且经常)阻止javascript的加载和/或运行，并保持一切良好和破碎。
工作的例子
假设您有一个徽章，当用户将鼠标悬停在它上面时，您希望它显示一个工具提示。
原始HTML:
<span class="badge badge-sm badge-plain">Admin Mode</span>
普通引导工具提示
如果您正在为HTML元素创建工具提示，并且您正在使用Plain Bootstrap工具提示，那么您将负责使用自己的JavaScript代码调用工具提示初始化器。
之前
<span class="badge badge-sm badge-plain">Admin Mode</span>
后
<span
class="badge badge-sm badge-plain"
data-toggle="tooltip"
data-placement="right"
title="Tooltip on right"
>Admin Mode</span>
初始化器
<script>
// Initialize any Tooltip on this page
$(document).ready(function ()
{
$('[data-toggle="tooltip"]').tooltip();
}
);
</script>
引导模板提示(如INSPINIA)
如果你正在使用一个引导模板(比如INSPINIA)，你需要包含一个支持脚本来支持模板特性:
<script src="/Scripts/app/inspinia.js" />
在INSPINIA的情况下，当文档加载完成时，所包含的脚本通过运行以下javascript代码自动初始化所有工具提示:
// Tooltips demo
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
});
因此，您不必自己初始化inspina样式的工具提示。但是你必须以特定的方式格式化你的元素。初始化器在class属性中查找带有tooltip-demo的HTML元素，然后调用tooltip()方法来初始化定义了属性data-toggle="tooltip"的任何子元素。
对于我们的示例徽章，在它周围放置一个具有class="tooltip-demo"的外部元素(如<div>或<span>)，然后在作为徽章的元素中放置实际工具提示的数据切换、数据放置和标题属性。从上面修改原始HTML，使其看起来像这样:
之前
<span class="badge badge-sm badge-plain">Admin Mode</span>
后
<span class="tooltip-demo">
<span
class="badge badge-sm badge-plain"
data-toggle="tooltip"
data-placement="right"
title="Tooltip on right"
>Admin Mode</span>
</span>
初始化器
None
注意，<span class="tooltip-demo">元素中的任何子元素都将正确地准备它们的工具提示。我可以有三个子元素，它们都需要工具提示，并将它们放在一个容器中。
多个项目，每个都有一个工具提示
<span class="tooltip-demo">
<span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
<span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
<span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>
最好的用法是将class="tooltip-demo"添加到<td>或最外层的<div>或<span>中。
使用模板时使用普通引导提示
如果使用INSPINIA，但不想添加额外的外部<div>或<span>标记来创建工具提示，则可以使用标准的引导提示，而不会干扰模板。在这种情况下，您将自己负责初始化工具提示。但是，应该在class属性中使用自定义值来标识工具提示项。这将防止工具提示初始化器干扰受INSPINIA影响的元素。在我们的例子中，让我们使用standalone-tt:
之前
<span class="badge badge-sm badge-plain">Admin Mode</span>
后
<span
class="standalone-tt badge badge-sm badge-plain"
data-toggle="tooltip"
data-placement="right"
title="Tooltip on right"
>Admin Mode</span>
初始化器
<script>
// Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
$(document).ready(function ()
{
$('.standalone-tt').tooltip();
}
);
</script>
