Menu
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.
581
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
To create a tooltip, add the data-toggle="tooltip" attribute to an element. Note: Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.
Tooltip: use tooltips to show a short text to respondents when they hover over a word or icon. Popover: use popovers to show a longer text, or when you want to have a link to an external web page. It is shown when the respondent clicks on a word or icon.
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.
60
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.
$(document).ready(function() { $('#example').tooltip(); }); <h3> Sensors Permissions <i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i> </h3> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
