How to add a twitter bootstrap tooltip to an icon How to add a twitter bootstrap tooltip to an icon javascript javascript

How to add a twitter bootstrap tooltip to an icon


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.


You might be forgetting to initialize your tooltips with .tooltip().

The .tooltip() function must be called on every element that you want to have a tooltip listener. This is for performance purposes. You can initialize a bunch at once by calling the function on a parent, like so: $('.tooltip-group').tooltip()

View the initialize function on one element on JSFiddle.

Javascript

$(document).ready(function() {  $('#example').tooltip();});

Markup

<h3>  Sensors Permissions  <i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i></h3>


@nickhar's answer, using data-toggle="tooltip" tested with Bootstrap 2.3.2 and 3.0 :

 <i class="icon-ok-sign" data-toggle="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(){    $("[data-toggle=tooltip]").tooltip({ placement: 'right'});});

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