Tooltips are small,interactive,textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function.

Tooltips

Add the Tooltipped class to your element and add either top,bottom,left,right on data-tooltip to control the position.

Words Tooltips

Add the Tooltipped class to your element and add either top,bottom,left,righton data-tooltip to control the position.

<!-- data-position can be :bottom,top,left,or right --><a class="btn tooltipped" data-position="bottom" data-tooltip="I am a tooltip">Hover me!</a>

Tooltips are initialized automatically,but if you have dynamically added tooltips,you will need to initialize them.

$(document).ready(function(){$('.tooltipped').tooltip()});

jQuery Plugin Options

Option NameDescription
delayDelay time before tooltip appears.(Default:350)
tooltipTooltip text. Can use custom HTML if you set the html option.
positionSet the direction of the tooltip. 'top','right','bottom','left'.(Default:'bottom')
htmlAllow custom html inside the tooltip.(Default:false)

Removal

To close the tooltip from the button,pass in 'close'as instance

// This will close the tooltip functionality for the buttons on this page instance.close();