Bootstrap Tips Tool (Tooltip) plug-in
May 04, 2021 Bootstrap
Table of contents
Bootstrap Tips Tool (Tooltip) plug-in
The Bootstrap Prompt Tool (Tooltip) plug-in tool displays relevant cues when it can be mouse-moved to a selected specific element.
Tooltip is useful when you want to describe a link. T he Tooltip plug-in is inspired by jQuery.tipsy written by Jason Frame. The Tooltip plug-in makes a number of improvements, such as not relying on images, but instead using CSS for animation and storing title information with the data property.
If you want to refer to the plug-in's functionality separately, you need to refer to the tooltip .js. Or, as mentioned in the Bootstrap plug-in overview chapter, you can refer to bootstrap.js or the compressed version of Bootstrap.min .js.
Usage
The Tooltip plug-in generates content and tags on demand, and by default places the Tooltip behind their trigger elements. There are two ways you can add a tooltip:
-
Via the data property: To add a tooltip, simply add a data-toggle to an anchor label. T he title of the anchor is the text of the tooltip. By default, the plug-in sets the tooltip at the top.
<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
-
With JavaScript: The JavaScript Trigger Prompt Tool (tooltip):
$('#identifier').tooltip(options)
Unlike the drop-down menus and other plug-ins discussed earlier, the Tooltip plug-in is not a pure CSS plug-in. T o use the plug-in, you must activate it with jquery (read javascript). Use the following script to enable all the prompt tools (tooltip) on the page:
$(function () { $("[data-toggle='tooltip']").tooltip(); });
Instance
The following example demonstrates the use of tooltip plug-ins through the data property.
<!DOCTYPE html><html><head>
<title>Bootstrap 实例 - 提示工具（Tooltip）插件</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head><body><h4>提示工具（Tooltip）插件 - 锚</h4>这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"
title="默认的 Tooltip">
默认的 Tooltip</a>.
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"
data-placement="left" title="左侧的 Tooltip">
左侧的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="top"
title="顶部的 Tooltip">
顶部的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom"
title="底部的 Tooltip">
底部的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="right"
title="右侧的 Tooltip">
右侧的 Tooltip</a><br><h4>提示工具（Tooltip）插件 - 按钮</h4><button type="button" class="btn btn-default" data-toggle="tooltip"
title="默认的 Tooltip">
默认的 Tooltip</button><button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="left" title="左侧的 Tooltip">
左侧的 Tooltip</button><button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="top" title="顶部的 Tooltip">
顶部的 Tooltip</button><button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="bottom" title="底部的 Tooltip">
底部的 Tooltip</button><button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="right" title="右侧的 Tooltip">
右侧的 Tooltip</button><script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });</script></body></html>The result is as follows:
_plug-in_1615815852.9511964.webp)
Options
Some options are added through the Bootstrap Data API or called through JavaScript. The following table lists these options:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| animation |
boolean
默认值：true |
data-animation | 提示工具使用 CSS 渐变滤镜效果。 |
| html |
boolean
默认值：false |
data-html | 向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。 |
| placement |
string|function
默认值：top |
data-placement |
规定如何定位提示工具（即 top|bottom|left|right|auto）。
当指定为 auto 时，会动态调整提示工具。例如，如果 placement 是 "auto left"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。 |
| selector |
string
默认值：false |
data-selector | 如果提供了一个选择器，提示工具对象将被委派到指定的目标。 |
| title |
string | function
默认值：'' |
data-title | 如果未指定 title 属性，则 title 选项是默认的 title 值。 |
| trigger |
string
默认值：'hover focus' |
data-trigger | 定义如何触发提示工具： click| hover | focus | manual 。您可以传递多个触发器，每个触发器之间用空格分隔。 |
| content |
string | function
默认值：'' |
data-content | 如果未指定 data-content 属性，则使用默认的 content 值。 |
| delay |
number | object
默认值：0 |
data-delay |
延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：
delay:{ show: 500, hide: 100 }
|
| container |
string | false
默认值：false |
data-container |
向指定元素追加提示工具。
实例： container: 'body' |
Method
Here are some useful ways to do this in the Tooltip plug-in:
| 方法 | 描述 | 实例 |
|---|---|---|
| Options: .tooltip(options) | 向元素集合附加提示工具句柄。 |
$().tooltip(options) |
| Toggle: .tooltip('toggle') | 切换显示/隐藏元素的提示工具。 |
$('#element').tooltip('toggle')
|
| Show: .tooltip('show') | 显示元素的提示工具。 |
$('#element').tooltip('show')
|
| Hide: .tooltip('hide') | 隐藏元素的提示工具。 |
$('#element').tooltip('hide')
|
| Destroy: .tooltip('destroy') | 隐藏并销毁元素的提示工具。 |
$('#element').tooltip('destroy')
|
Instance
The following example demonstrates the use of the Tooltip plug-in approach.
<!DOCTYPE html><html><head>
<title>Bootstrap 实例 - 提示工具（Tooltip）插件方法</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head><body><div style="padding: 100px 100px 10px;">
这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip"
title="show">Tooltip 方法 show </a>.
这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip"
data-placement="left" title="hide">Tooltip 方法 hide </a>.
这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip"
data-placement="top" title="destroy">Tooltip 方法 destroy </a>.
这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip"
data-placement="bottom" title="toggle">Tooltip 方法 toggle </a>. <br><br><br><br><br><br>
<p class="tooltip-options" >
这是一个 <a href="#" data-toggle="tooltip" title="<h2>'am Header2 </h2>">Tooltip 方法 options </a>. </p>
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-hide').tooltip('hide');});
$(function () { $('.tooltip-destroy').tooltip('destroy');});
$(function () { $('.tooltip-toggle').tooltip('toggle');});
$(function () { $(".tooltip-options a").tooltip({html : true });
});
</script><div></body></html>The result is as follows:
_plug-in_1615815866.5556176.webp)
Event
The following table lists the events to use in the Tooltip plug-in. These events can be used as hooks in functions.
| 事件 | 描述 | 实例 |
|---|---|---|
| show.bs.tooltip | 当调用 show 实例方法时立即触发该事件。 |
$('#myTooltip').on('show.bs.tooltip', function () {
// 执行一些动作...})
|
| shown.bs.tooltip | 当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 |
$('#myTooltip').on('shown.bs.tooltip', function () {
// 执行一些动作...})
|
| hide.bs.tooltip | 当调用 hide 实例方法时立即触发该事件。 |
$('#myTooltip').on('hide.bs.tooltip', function () {
// 执行一些动作...})
|
| hidden.bs.tooltip | 当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。 |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// 执行一些动作...})
|
Instance
The following example demonstrates the use of tooltip plug-in events.
<!DOCTYPE html><html><head>
<title>Bootstrap 实例 - 提示工具（Tooltip）插件事件</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head><body><h4>提示工具（Tooltip）插件 - 锚</h4>这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip"
title="默认的 Tooltip">默认的 Tooltip</a>.
<script>
$(function () {
$('.tooltip-show').tooltip('show');
});
$(function () {
$('.tooltip-show').on('show.bs.tooltip', function () {
alert("Alert message on show");
})});</script>
</body></html>The result is as follows:
_plug-in_1615815883.8093162.webp)