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.
<!-- 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 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 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();