How to add twitter tooltip for icon

Question

I would add the right tip from the twitter bootstrap to the icon element.

The code looks like this:

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

I would say that when the cursor is over the icon, a right hint is displayed with some information ...

How can i do this? Is this not enough to add lyrics to tooltip.js and put the element in the icon code? I'm confused.

Thank.

Answer 1

I recently used it like this:

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

What produces:

You set the positioning of the tooltip and other functions (delays, etc.) by declaring them with js:

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

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

Answer 2

You may forget to initialize your tooltips with .tooltip() .

The .tooltip() function should be called for each element in which you want to listen to the tooltip. This is for performance purposes. You can initialize the bundle right away by calling the function on the parent, for example: $('.tooltip-group').tooltip()

View a single element initialization function in a 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> 

Answer 3

@nickhar 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> 

What produces:

You set the positioning of the tooltip and other functions (delays, etc.) by declaring them with js:

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

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

Answer 4

in javascript

 $(function () { $(".has-tooltip-right").tooltip({ placement: 'right'}); $(".has-tooltip-left").tooltip({ placement: 'left'}); $(".has-tooltip-bottom").tooltip({ placement: 'bottom'}); $(".has-tooltip").tooltip(); }); 

in html

 <a href="#" class="has-tooltip-bottom" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="has-tooltip" title="" data-original-title="Another link">that link</a>