Bootstrap Tooltip Plugin
When you want to describe a link, the Tooltip plugin is very useful. The Tooltip plugin is inspired byJason FramewrittenjQuery.tipsyinspired by. The Tooltip plugin has made many improvements, such as not needing to rely on images, instead using CSS to implement animation effects, and using data attributes to store title information.
If you want to separately reference the functionality of the plugin, then you need to referencetooltip.js. Alternatively, asBootstrap Plugins Overviewchapter mentions, you can referencebootstrap.jsor the compressed version ofbootstrap.min.js。
Usage
The Tooltip plugin generates content and markup on demand, and by default puts the tooltip behind their trigger element. You can add tooltips in the following two ways:
- Via data attributes: To add a tooltip, simply add to an anchor tagdata-toggle="tooltip"and you are done. The anchor's title is the text of the tooltip. By default, the plugin places the tooltip at the top.
<a href="../index.html" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
- Via JavaScript: Trigger the tooltip via JavaScript:
$('#identifier').tooltip(options)
The Tooltip plugin is not like the dropdown menu and other plugins discussed previously; it is not a pure CSS plugin. To use this plugin, you must activate it with jQuery (read JavaScript). Use the following script to enable all tooltips on the page:
$(function () { $("[data-toggle='tooltip']").tooltip(); });
Examples
The following example demonstrates the usage of the Tooltip plugin via data attributes.
Examples
<h4>Tooltip Plugin - Anchor</h4>This is a<a href="#" class="tooltip-test" data-toggle="tooltip"
title="Default Tooltip">Default Tooltip</a>.
This is a<a href="#" class="tooltip-test" data-toggle="tooltip"
data-placement="left" title="Tooltip on the left">Tooltip on the left</a>.
This is a<a href="#" data-toggle="tooltip" data-placement="top"
title="Tooltip on the top">Tooltip on the top</a>.
This is a<a href="#" data-toggle="tooltip" data-placement="bottom"
title="Tooltip on the bottom">Tooltip on the bottom</a>.
This is a<a href="#" data-toggle="tooltip" data-placement="right"
title="Tooltip on the right">Tooltip on the right</a>
<br>
<h4>Tooltip Plugin - Button</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip"
title="Default Tooltip">Default Tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="left" title="Tooltip on the left">Tooltip on the left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="top" title="Tooltip on the top">Tooltip on the top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="bottom" title="Tooltip on the bottom">Tooltip on the bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="right" title="Tooltip on the right">Tooltip on the right</button>
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
Try it yourself »
The result is as follows:
Options
Some options are added via the Bootstrap Data API or invoked via JavaScript. The following table lists these options:
| Option name | Type/Default value | Data attribute name | Description |
|---|---|---|---|
| animation | boolean Default: true | data-animation | The tooltip uses CSS gradient filter effects. |
| html | boolean Default: false | data-html | Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. If you are worried 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 asauto, the tooltip will be dynamically adjusted. For example, if placement is "auto left", the tooltip will be displayed as far left as possible, and only when the situation does not allow it will it be displayed on the right. |
| selector | string Default value: false | data-selector | If a selector is provided, tooltip objects will be delegated to the specified targets. |
| title | string | function Default value: '' | data-title | If not specifiedtitleattribute, then the title option is the default title value. |
| trigger | string Default value: 'hover focus' | data-trigger | Defines how the tooltip is triggered: click| hover | focus | manual. You can pass multiple triggers, each separated by a space. |
| delay | number | object Default value: 0 | data-delay | The number of milliseconds to delay showing and hiding the tooltip - not applicable to the manual trigger type. If a number is provided, the delay will apply to both showing and hiding. If an object is provided, the structure is as follows:
delay:
{ show: 500, hide: 100 } |
| container | string | false Default value: false | data-container | Appends the tooltip to a specified element. Example: container: 'body' |
Methods
The following are some useful methods in the Tooltip plugin:
| Method | Description | Example |
|---|---|---|
| Options: .tooltip(options) | Attaches a tooltip handler to the element collection. |
$().tooltip(options) |
| Toggle: .tooltip('toggle') | Toggles showing/hiding the tooltip of an element. |
$('#element').tooltip('toggle')
|
| Show: .tooltip('show') | Shows the tooltip of an element. |
$('#element').tooltip('show')
|
| Hide: .tooltip('hide') | Hides the tooltip of an element. |
$('#element').tooltip('hide')
|
| Destroy: .tooltip('destroy') | Hides and destroys the tooltip of an element. |
$('#element').tooltip('destroy')
|
Examples
The following example demonstrates the usage of the Tooltip plugin methods.
Examples
<div style="padding: 100px 100px 10px;">This is a<a href="#" class="tooltip-show" data-toggle="tooltip"
title="show">Tooltip method show</a>.
This is a<a href="#" class="tooltip-hide" data-toggle="tooltip"
data-placement="left" title="hide">Tooltip method hide</a>.
This is a<a href="#" class="tooltip-destroy" data-toggle="tooltip"
data-placement="top" title="destroy">Tooltip method destroy</a>.
This is a<a href="#" class="tooltip-toggle" data-toggle="tooltip"
data-placement="bottom" title="toggle">Tooltip method toggle</a>.
<br><br><br><br><br><br>
<p class="tooltip-options" >This is a<a href="#" data-toggle="tooltip" title="<h2>'am Header2
</h2>">Tooltip method 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>
Try it »
The result is as follows:
Events
The following table lists the events used in the Tooltip plugin. These events can be used as hooks in functions.
| Event | Description | Example |
|---|---|---|
| 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 triggered when the tooltip is visible to the user (it will wait for the CSS transition 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 (it will wait for the CSS transition to complete). |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// 执行一些动作...
})
|
Examples
The following example demonstrates the usage of the Tooltip plugin events.
Examples
<h4>Tooltip plugin - Anchor</h4>This is a<a href="#" class="tooltip-show" data-toggle="tooltip"
title="default Tooltip">default Tooltip</a>.
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
alert("Alert message on show");
})
});
</script>
Try it »
The result is as follows:
