How to add a twitter bootstrap tooltip to an icon

JavascriptTwitter BootstrapTooltip

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

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>

Solution 3 - Javascript

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

Solution 4 - Javascript

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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionsharkbaitView Question on Stackoverflow
Solution 1 - JavascriptnickharView Answer on Stackoverflow
Solution 2 - JavascriptjamespleaseView Answer on Stackoverflow
Solution 3 - JavascriptHendy IrawanView Answer on Stackoverflow
Solution 4 - JavascriptMalay MView Answer on Stackoverflow