How to add a twitter bootstrap tooltip to an icon

javascript twitter-bootstrap tooltip

sharkbait · Mar 19, 2013 · Viewed 87.7k times · Source

I would add a right-tooltip from twitter bootstrap to an icon element.

The code is this:

<h3>Sensors Permissions <i class="icon-info-sign"></i></h3>

I would that, when the cursor is over the icon, is shown a right tooltip with some informations...

How can I do? It's not enough include the tooltip.js librery and put a element in the icon code? I'm confused.

Thank you.

Answer

I've recently used it like this:

 <i class="icon-ok-sign" rel="tooltip" title="Key active" id="blah"></i>

Which produces:

enter image description here

You set the positioning of the tooltip and other features(delays etc) by declaring it using js:

$(document).ready(function(){
    $("[rel=tooltip]").tooltip({ placement: 'right'});
});

As mentioned in comments, you can find other attributes/options here.