Bootstrap Tooltip Plugin

Bootstrap Tooltip Plugin is helpful when you require explaining a link. This plugin is inspired by the excellent jQuery.tipsy plugin written by Jason Frame. Tooltips are an updated version, which don’t rely on images, use CSS3 for animations, and data-attributes for local title storage.

If you want to implement functionality of this plugin individually, simple include the tooltip.js file along the other JS files. Else as we have discussed in the tutorial of Bootstrap Plugin Overview, you can include bootstrap.jsor the minified bootstrap.min.js.


The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. You can use this tooltips plugin by the following two methods.

Via data attributes

For use the tooltip as you required, add data-toggle=”tooltip” attribute to an <a> tag. Write your text for tooltip in the title attribute of the anchor. Default locaion of the tooltip is top.

Via JavaScript

Trigger the tooltip via JavaScript:

Example with anchor tag

Example with buttons tag


There are certain options which can be added via the Bootstrap Data API or invoked via JavaScript. Following table lists the options:

Name Type Default Description
animation boolean true Apply a CSS fade transition to the tooltip
container string | false false

Appends the tooltip to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element – which will prevent the tooltip from floating away from the triggering element during a window resize.

delay number | object 0

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/show

Object structure is: delay: { show: 500, hide: 100 }

html boolean false 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 ‘top’ How to position the tooltip – 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 display to the left when possible, otherwise it will display right.
selector string false If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See this and an informative example.
template string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML to use when creating the tooltip.

The tooltip’s title will be injected into the .tooltip-inner.

.tooltip-arrow will become the tooltip’s arrow.

The outermost wrapper element should have the .tooltip class.

title string | function Default title value if title attribute isn’t present
trigger string ‘hover focus’ How tooltip is triggered – click | hover | focus | manual. You may pass multiple triggers; separate them with a space.
viewport string | object { selector: ‘body’, padding: 0 }

Keeps the tooltip within the bounds of this element. Example: viewport: '#viewport' or { selector: '#viewport', padding: 0 }


The following are some useful methods for tooltips:

Method Description Example
Options: .tooltip(options) Attaches a tooltip handler to an element collection.
Toggle: .tooltip(‘toggle’) Toggles an element’s tooltip.
Show: .tooltip(‘show’) Reveals an element’s tooltip.
Hide: .tooltip(‘hide’) Hides an element’s tooltip.
Destroy: .tooltip(‘destroy’) Hides and destroys an element’s tooltip.


The following example demonstrates the use of tooltip plugin via data attributes.


Following mentioned list of events work with tootip plugin.

Event Description

This event fires immediately when the show instance method is called.

This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete)..

This event is fired immediately when the hide instance method has been called.

This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).


This example demonstrates the use of tooltip plugin via data attributes.

Leave a Reply

Your email address will not be published. Required fields are marked *