How to add a twitter bootstrap tooltip to an icon
JavascriptTwitter BootstrapTooltipJavascript 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:
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:
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>