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
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');