Bootstrap tooltip
Bootstrap Tooltip plug-in
Tooltip is very useful when you want to describe a link. The Tooltip plug-in is inspired by jQuery.tipsy written by Jason Frame. The Tooltip plug-in has made many improvements. For example, it does not need to rely on images, but instead uses CSS to achieve animation effects and uses the data attribute to store title information.
If you want to reference the functionality of this plugin separately, then you need to reference tooltip.js. Alternatively, as mentioned in the Bootstrap plugin overview chapter, you can reference bootstrap.js or the minified version of bootstrap.min.js.
Usage
Tooltip plug-ins generate content and markup according to requirements. By default, tooltips are placed after their triggering elements. You can add tooltips in the following two ways:
Through the data attribute: To add a tooltip, just add a Just add data-toggle="tooltip" to the anchor tag. The title of the anchor is the text of the tooltip. By default, the plugin places the tooltip at the top.
##<a href="#" data-toggle="tooltip" title="Example tooltip">Please hover over mine</a>
Via JavaScript: Trigger tooltip via JavaScript:
$( '#identifier').tooltip(options)
The Tooltip plug-in is not a pure CSS plug-in like the drop-down menus and other plug-ins discussed before. To use the plugin, you must activate it using jquery (read javascript). Use the following script to enable all tooltips on the page: $(function () { $("[data-toggle='tooltip']").tooltip(); });ExampleThe following example demonstrates the use of the Tooltip plug-in through the data attribute. Instance
Run instance »Click the "Run instance" button to view the online instance
Run instance»
Run instance»
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 提示工具（Tooltip）插件</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></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>Run instance »Click the "Run instance" button to view the online instance
Options
There are some options added through the Bootstrap Data API (Bootstrap Data API) or called through JavaScript. The following table lists these options:
| Option Name | Type/Default Value | Data Property Name | Description |
|---|---|---|---|
| animation | boolean Default value: true | data-animation | Prompt Tool uses CSS gradient filter effect. |
| html | boolean Default value: false | data-html | Prompt Tool to insert HTML. If false, jQuery's text method will be used to insert content into the dom. If you are concerned about XSS attacks, use text. |
| placement | string|function Default value: top | data-placement | Specifies how to position the tooltip (i.e. top|bottom|left|right|auto). When specified as auto, the prompt tool will be dynamically adjusted. For example, if placement is "auto left", the tooltip will be displayed on the left if possible, and will be displayed on the right if the situation does not allow it. |
| selector | string Default value: false | data-selector | if provided Given a selector, the tooltip object will be delegated to the specified target. |
| title | string | function Default value: '' | data-title | If the title attribute is not specified, the title option is the default title value. |
| trigger | string Default value: 'hover focus' | data-trigger | Define how to trigger tooltips: click| hover | focus | manual. You can pass multiple triggers, each separated by a space. |
| content | string | function Default value: '' | data-content | If the data-content attribute is not specified, the default content value is used. |
| delay | number | object Default value: 0 | data-delay | Number of milliseconds to delay showing and hiding tooltips - not applicable for manual trigger type. If a number is provided, the delay will be applied to showing and hiding. If an object is provided, the structure looks like this: delay:
{ show: 500, hide: 100 } |
| container | string | false Default value: false | data-container | Append tooltips to the specified element. Example: container: 'body' |
Methods
The following are some useful methods in the Tooltip plug-in:
| Method | Description | Example |
|---|---|---|
| Options: .tooltip(options) | Append the tooltip handle to the element collection. | $().tooltip(options) |
| Toggle: .tooltip('toggle') | Toggle the tooltip to show/hide the element. | $('#element').tooltip('toggle') |
| Show: .tooltip('show') | Show the tooltip of the element. | $('#element').tooltip('show') |
| Hide: .tooltip('hide') | Hide element tooltip. | $('#element').tooltip('hide') |
| Destroy: .tooltip('destroy') | Tips tool for hiding and destroying elements. | $('#element').tooltip('destroy') |
Example
The following example demonstrates the usage of the Tooltip plug-in method.
Instance
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 提示工具（Tooltip）插件方法</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></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>Run instance»
Click the "Run instance" button to view the online instance
Events
The following table lists the events used in the Tooltip plug-in. These events can be used as hooks in functions.
| Event | Description | Instance |
|---|---|---|
| show.bs.tooltip | This event is triggered immediately when the show instance method is called. | $('#myTooltip').on('show.bs.tooltip', function () {
// 执行一些动作...
}) |
| shown.bs.tooltip | This event is fired when the tooltip becomes visible to the user (will wait for the CSS transition effect to complete). | $('#myTooltip').on('shown.bs.tooltip', function () {
// 执行一些动作...
}) |
| hide.bs.tooltip | This event is triggered immediately when the hide instance method is called. | $('#myTooltip').on('hide.bs.tooltip', function () {
// 执行一些动作...
}) |
| hidden.bs.tooltip | This event is triggered when the tooltip is hidden from the user (will wait for the CSS transition effect to complete). | $('#myTooltip').on('hidden.bs.tooltip', function () {
// 执行一些动作...
}) |
Example
The following example demonstrates the usage of Tooltip plug-in events
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 提示工具（Tooltip）插件事件</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></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>Run instance»
Click the "Run instance" button to view the online instance
