Search code examples
javascripttwitter-bootstraptooltip

How to add a twitter bootstrap tooltip to an icon


I would like to 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, a right-tooltip with some information is shown.


Solution

  • 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.