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.


<!-- data-position can be : bottom, top, left, or right -->
<!-- data-delay controls delay before tooltip shows (in milliseconds)-->
<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Hover me!</a>
                  

Words Tooltips

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

Initialization

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


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

jQuery Plugin Options

Option Name Description
delay Delay time before tooltip appears. (Default: 350)
tooltip Tooltip text. Can use custom HTML if you set the html option.
position Set the direction of the tooltip. 'top', 'right', 'bottom', 'left'. (Default: 'bottom')
html Allow custom html inside the tooltip. (Default: false)

Removal

To remove the tooltip from the button, pass in 'remove' as the option to the tooltip function


// This will remove the tooltip functionality for the buttons on this page
$('.tooltipped').tooltip('remove');