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.

Usage

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.

<a href="#" data-toggle="tooltip" title="Example tooltip">Hover over me</a>

 <!-- Generated markup by the plugin -->
 <div class="tooltip top" role="tooltip">
 <div class="tooltip-arrow"></div>
 <div class="tooltip-inner">
 Some tooltip text!
 </div>
 </div>

Via JavaScript

Trigger the tooltip via JavaScript:

$('#identifier').tooltip(options)

Example with anchor tag

<h4>Tooltip examples for anchors</h4>
This is a <a href="#" class="tooltip-test" data-toggle="tooltip" 
 title="Tooltip on left">
 Default Tooltip
</a>.
This is a <a href="#" class="tooltip-test" data-toggle="tooltip" 
 data-placement="left" title="Tooltip on left">
 Tooltip on Left
</a>.
This is a <a href="#" data-toggle="tooltip" data-placement="top" 
 title="Tooltip on top">
 Tooltip on Top
</a>.
This is a <a href="#" data-toggle="tooltip" data-placement="bottom" 
 title="Tooltip on bottom">
 Tooltip on Bottom
</a>.
This is a <a href="#" data-toggle="tooltip" data-placement="right" 
 title="Tooltip on right">
 Tooltip on Right
</a>

Demo

Example with buttons tag

<h4>Tooltip examples for buttons</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" 
 title="Tooltip on left">
 Default Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" 
 data-placement="left" title="Tooltip on left">
 Tooltip on left
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" 
 data-placement="top" title="Tooltip on top">
 Tooltip on top
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" 
 data-placement="bottom" title="Tooltip on bottom">
 Tooltip on bottom
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" 
 data-placement="right" title="Tooltip on right">
 Tooltip on right
</button>
<script>
 $(function () $("[data-toggle='tooltip']").tooltip(); );
</script>

Demo

Options

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

Methods

The following are some useful methods for tooltips:

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 use of tooltip plugin via data attributes.

<div style="padding: 100px 100px 10px;">
 This is a <a href="#" class="tooltip-show" data-toggle="tooltip" 
 title="show">Tooltip on method show
 </a>.

 This is a <a href="#" class="tooltip-hide" data-toggle="tooltip" 
 data-placement="left" title="hide">Tooltip on method hide
 </a>.

 This is a <a href="#" class="tooltip-destroy" data-toggle="tooltip" 
 data-placement="top" title="destroy">Tooltip on method destroy
 </a>.

 This is a <a href="#" class="tooltip-toggle" data-toggle="tooltip" 
 data-placement="bottom" title="toggle">Tooltip on 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 on 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>

Demo

Events

Following mentioned list of events work with tootip plugin.

Event	Description
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

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

<h4>Tooltip examples for anchors</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>

Demo

Bootstrap Tooltip Plugin