YouTipWhen you want to describe a link, a Tooltip is very useful. The Tooltip plugin is inspired by _jQuery.tipsy_ written by _Jason Frame_. The Tooltip plugin has many improvements, such as not relying on images, but using CSS for animation effects, and using data attributes to store title information.
If you want to use the functionality of this plugin separately, you need to include tooltip.js. Or, as mentioned in the Bootstrap Plugins Overview chapter, you can include _bootstrap.js_ or the minified version _bootstrap.min.js_.
Usage
The Tooltip plugin generates content and markup on demand. By default, tooltips are placed after their triggering elements. You can add tooltips in two ways:
- Via Data Attributes: To add a tooltip, simply add
data-toggle="tooltip"to an anchor tag. The anchor'stitlewill be the tooltip's text. By default, the plugin sets the tooltip to the top. Hover over me - Via JavaScript: Trigger the tooltip via JavaScript:
$('#identifier').tooltip(options)
The Tooltip plugin is not a pure CSS plugin like the dropdown and other plugins discussed earlier. To use this plugin, you must activate it with jQuery (read the JavaScript). Use the following script to enable all tooltips on the page:
$(function () { $("[data-toggle='tooltip']").tooltip(); });
Example
The following example demonstrates the usage of the Tooltip plugin via data attributes.
Example
Tooltip Plugin - Anchor
This is a Default Tooltip.
This is a Left Tooltip.
This is a Top Tooltip.
This is a Bottom Tooltip.
This is a Right Tooltip.
Tooltip Plugin - Button
The result is shown below:
Options
Some options are added via the Bootstrap Data API or called via JavaScript. The following table lists these options:
| Option Name | Type / Default Value | Data Attribute Name | Description |
|---|---|---|---|
| animation | boolean Default: true | data-animation | Applies a CSS fade transition to the tooltip. |
| 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. Use text if you're worried about XSS attacks. |
| placement | string|function Default: top | data-placement | How to position the tooltip (i.e., top|bottom|left|right|auto). When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will be displayed to the left whenever possible, otherwise it will be displayed to the right. |
| selector | string Default: false | data-selector | If a selector is provided, tooltip objects will be delegated to the specified target. |
| title | string|function Default: '' | data-title | Default title value if the title attribute isn't present. |
| trigger | string Default: 'hover focus' | data-trigger | How tooltip is triggered (click| hover | focus | manual). You may pass multiple triggers; separate them with a space. |
| delay | number|object Default: 0 | data-delay | Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide and show. If an object is supplied, the structure is: delay:{ show: 500, hide: 100 } |
| container | string|false Default: false | data-container | Appends the tooltip to a specific element. Example: container: 'body' |
Methods
Below are some useful methods for the Tooltip plugin:
| Method | Description | Example |
|---|---|---|
| Options: .tooltip(options) | Attaches a tooltip handler to an element collection. | $().tooltip(options) |
| Toggle: .tooltip('toggle') | Toggles an element's tooltip. | $('#element').tooltip('toggle') |
| Show: .tooltip('show') | Reveals an element's tooltip. | $('#element').tooltip('show') |
| Hide: .tooltip('hide') | Hides an element's tooltip. | $('#element').tooltip('hide') |
| Destroy: .tooltip('destroy') | Hides and destroys an element's tooltip. | $('#element').tooltip('destroy') |
Example
The following example demonstrates the usage of Tooltip plugin methods.
Example
This is a Tooltip method show.
This is a Tooltip method hide.
This is a Tooltip method destroy.
This is a Tooltip method toggle.
'am Header2
">Tooltip method options. $(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}); });The result is shown below:
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 fires immediately when the show instance method is called. | $('#myTooltip').on('show.bs.tooltip', function () { // do something... }) |
| shown.bs.tooltip | This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). | $('#myTooltip').on('shown.bs.tooltip', function () { // do something... }) |
| hide.bs.tooltip | This event is fired immediately when the hide instance method has been called. | $('#myTooltip').on('hide.bs.tooltip', function () { // do something... }) |
| hidden.bs.tooltip | This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). | $('#myTooltip').on('hidden.bs.tooltip', function () { // do something... }) |
Example
The following example demonstrates the usage of Tooltip plugin events.
Example
Tooltip Plugin - Anchor
This is a Default Tooltip.
$(function(){ $('.tooltip-show').tooltip('show');}); $(function(){ $('.tooltip-show').on('show.bs.tooltip', function(){alert("Alert message on show"); })});The result is shown below: