Bootstrap 工具提示
在本教程中，您将学习如何使用 Bootstrap 创建工具提示。
使用 Bootstrap 创建工具提示
工具提示是当用户将鼠标指针放在链接或按钮等元素上时出现的一个小弹出窗口，以提供有关被悬停的元素的提示或信息。
工具提示对您网站的新访问者非常有帮助，因为它们使用户能够通过将鼠标指针放在图标和链接上来了解它们的用途。
第 1 步：添加工具提示标记
要创建工具提示，您需要将 data-toggle="tooltip" 属性添加到元素。 可以使用 title 属性指定悬停时显示的提示文本。
这是向超链接添加工具提示的标准标记。
同样，您可以将工具提示添加到其他元素，例如按钮、图标等。
注意： 出于性能原因，选择加入工具提示数据 API，这意味着要使用工具提示，您必须自己使用 tooltip() 方法对其进行初始化。 此外，标题长度为零的工具提示永远不会显示，隐藏元素上的工具提示也不起作用。
第 2 步：触发工具提示
工具提示可以通过 JavaScript 触发 — 只需使用目标元素的 id, class 或任何 CSS 选择器 调用 tooltip() Bootstrap 方法 你的 JavaScript 代码。
您可以单独或一次性初始化工具提示。 下面的 jQuery 代码将通过 data-toggle 属性选择页面上的所有工具提示来初始化它们。
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>— 上面示例的输出将如下所示：
设置工具提示的方向
您可以将工具提示设置为显示在元素的顶部、右侧、底部和左侧。
通过数据属性定位工具提示
以下示例将向您展示如何通过数据属性设置工具提示的方向。
<a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a>通过 JavaScript 定位工具提示
以下示例将向您展示如何通过 JavaScript 设置工具提示的方向。
<script>
$(document).ready(function(){
$(".tip-top").tooltip({placement : 'top'});
$(".tip-right").tooltip({placement : 'right'});
$(".tip-bottom").tooltip({placement : 'bottom'});
$(".tip-left").tooltip({ placement : 'left'});
});
</script>选项
有些选项可以传递给 tooltip() 引导方法来自定义工具提示插件的功能。
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| animation | boolean | true | 对工具提示应用 CSS 淡入淡出过渡。 |
| container | string | element | false | false |
将工具提示附加到特定元素。 指定 |
| delay | number | object | 0 |
显示和隐藏工具提示的延迟时间（毫秒）— 不适用于手动触发类型。 如果提供了一个数字，延迟将应用于隐藏/显示 对象结构为： |
| html | boolean | false |
在工具提示中允许 HTML。 如果为 true，则工具提示的 如果您担心 XSS 攻击，请使用简单的文本。 |
| placement | string | function | 'top' |
设置工具提示的位置 — top | bottom | left | right | auto。 当指定 |
| selector | string | false | false |
如果提供了选择器，则工具提示对象将附加到指定的目标。 这通常用于将工具提示应用于动态添加的 DOM 元素。 |
| template | string | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
创建工具提示时使用的基本 HTML。 工具提示的 最外层的包装元素应该有 |
| title | string | element | function | '' | 如果 title 属性不存在，则设置默认标题值。 |
| trigger | string | 'hover focus' |
指定如何触发工具提示 — click | hover | focus | manual。 您可以传递多个触发器； 用空格隔开。
|
| offset | number | string | function | 0 | 工具提示相对于其目标的偏移量。 |
| fallbackPlacement | string | array | 'flip' | 允许您指定 Popper 将在回退时使用的位置。 |
| customClass | string | function | '' |
在工具提示显示时添加类。 请注意，除了模板中指定的任何类之外，还将添加这些类。 要添加多个类，请使用空格分隔它们，例如： 您还可以传递一个函数，该函数应返回包含其他类名的单个字符串。 |
| boundary | string | element | 'scrollParent' | 工具提示的溢出约束边界。 接受 'viewport', 'window', 'scrollParent' 的值或 HTMLElement 引用（仅限 JavaScript）。 |
| sanitize | boolean | true | 启用或禁用清理。 如果激活 'template' 和 'title' 选项将被清理。 |
| whiteList | object | value | 包含允许的属性和标签的对象。 |
| sanitizeFn | null | function | null | 允许您指定自己的清理功能。 |
| popperConfig | null | object | null | 允许您更改 Bootstrap 的默认 Popper 配置，请参阅 Popper 的配置。 |
您可以通过使用数据属性或 JavaScript 来设置这些选项。 要通过数据属性设置工具提示选项，只需将选项名称附加到 data- 以及正确的值，如 data-animation="false", data-placement="bottom" 等。
但是，JavaScript 是设置这些选项的更可取的方式，因为它可以防止您重复工作。 请参阅以下部分中的工具提示方法 $().tooltip(options) 以了解如何使用 JavaScript 设置工具提示的选项。
方法
这些是标准 Bootstrap 的工具提示方法：
$().tooltip(options)
此方法将工具提示处理程序附加到一组元素。 它还允许您设置工具提示的选项，以便您可以根据需要自定义它们。
如果 title 属性的值从所选元素中省略或缺失，则以下示例将在工具提示中插入指定的文本：
<script>
$(document).ready(function(){
$("#myTooltips a").tooltip({
title: "This will show in absence of title attribute."
});
});
</script>以下示例将向您展示如何将 HTML 内容放置在工具提示中：
<script>
$(document).ready(function(){
$("#myTooltip").tooltip({
title: "<h4><img src='images/smiley.png' alt='Smiley'> Hello, <b>I'm</b> <i>Smiley!</i></h4>",
html: true
});
});
</script>以下示例将向您展示如何通过 JavaScript 使用工具提示的 delay 选项控制工具提示的显示和隐藏时间。
<script>
$(document).ready(function(){
// 以相同的速度显示和隐藏工具提示
$(".tooltip-tiny").tooltip({
delay: 500
});
// 以不同的速度显示和隐藏工具提示
$(".tooltip-large").tooltip({
delay: {show: 0, hide: 500}
});
});
</script>以下示例将向您展示如何为引导工具提示创建自己的自定义模板，而不是使用默认模板。
<script>
$(document).ready(function(){
$("#myTooltips a").tooltip({
template: '<div class="tooltip"><div class="arrow"></div><div class="tooltip-head"><h3><i class="fa fa-info-circle"></span> Tool Info</h3></div><div class="tooltip-inner"></div></div>'
});
});
</script>以下示例将在 .wrapper 元素而不是 <body> 元素的末尾插入工具提示的动态生成的 HTML 代码。
<script>
$(document).ready(function(){
// 将工具提示 HTML 附加到包装器元素
$("#myTooltips a").tooltip({container: ".wrapper"});
});
</script>注意： 覆盖工具提示的默认 container 选项值不会在页面上产生任何可见的差异。 要查看实际结果，您需要使用 Firebug 或 Developer 工具检查生成的 DOM。
Similarly, you can set other options for the tooltips using the $().tooltip(options) method. Let's check out the other methods of the Bootstrap tooltip plugin.
.tooltip('show')
此方法显示元素的工具提示。
<script>
$(document).ready(function(){
$(".show-tooltip").click(function(){
$("#myTooltip").tooltip('show');
});
});
</script>.tooltip('hide')
此方法隐藏元素的工具提示。
<script>
$(document).ready(function(){
$(".hide-tooltip").click(function(){
$("#myTooltip").tooltip('hide');
});
});
</script>.tooltip('toggle')
此方法切换元素的工具提示。
<script>
$(document).ready(function(){
$(".toggle-tooltip").click(function(){
$("#myTooltip").tooltip('toggle');
});
});
</script>.tooltip('dispose')
此方法隐藏和销毁元素的工具提示。
<script>
$(document).ready(function(){
$(".destroy-tooltip").click(function(){
$("#myTooltip").tooltip('dispose');
});
});
</script>.tooltip('enable')
此方法使元素的工具提示能够显示。 默认情况下启用工具提示。
<script>
$(document).ready(function(){
$(".enable-tooltip").click(function(){
$("#myTooltip").tooltip('enable');
});
});
</script>.tooltip('disable')
此方法取消了显示元素工具提示的能力。 工具提示只有在重新启用后才能显示。
<script>
$(document).ready(function(){
$(".disable-tooltip").click(function(){
$("#myTooltip").tooltip('disable');
});
});
</script>.tooltip('toggleEnabled')
此方法切换显示或隐藏元素工具提示的能力。
<script>
$(document).ready(function(){
$(".toggle-enabled-tooltip").click(function(){
$("#myTooltip").tooltip('toggleEnabled');
});
});
</script>.tooltip('update')
此方法更新元素工具提示的位置。
<script>
$(document).ready(function(){
$(".update-tooltip").click(function(){
$("#myTooltip").tooltip('update');
});
});
</script>事件
Bootstrap 的工具提示类包含一些用于挂钩工具提示功能的事件。
| 事件 | 说明 |
|---|---|
| show.bs.tooltip | 该事件在调用 show 实例方法时立即触发。 |
| shown.bs.tooltip | 当工具提示对用户可见时触发此事件。 它会等到 CSS 转换过程完全完成后才会被触发。 |
| hide.bs.tooltip | 当调用 hide 实例方法时立即触发此事件。 |
| hidden.bs.tooltip | 当工具提示完成对用户隐藏时触发此事件。 它会等到 CSS 转换过程完全完成后才会被触发。 |
| inserted.bs.tooltip | 当工具提示模板已添加到 DOM 时，该事件在 show.bs.tooltip 事件之后触发。 |
当工具提示的淡出过渡完全完成时，以下示例将向用户显示一条警告消息。
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').on('hidden.bs.tooltip', function(){
alert("Tooltip has been completely closed.");
});
});
</script>