Bootstrap tooltip usage

Question

I am adding bootstrap tooltip to my a tag like this :

jQuery('span.arUp a').attr("data-placement", "top");
jQuery('span.arUp a').attr("data-toggle", "tooltip");
jQuery('span.arUp a').attr("data-original-title", "Tooltip on top");

and a tag looks like this :

<a rel="next" href="http://roadmap.private.net/?p=28" data-placement="top" data-toggle="tooltip" data-original-title="Tooltip on top">Fedrer</a>

But no tooltip is coming. Please help!!

Duplicate of http://stackoverflow.com/questions/9446318/bootstrap-tooltips-not-working — Carol Skelly, May 20 '13 at 18:01
@Skelly It doesn't appear to be a duplicate. Sankalp, is the above HTML the output _after_ the jQuery has run, or is the HTML delivered to the browser as you have written it? — seangates, May 20 '13 at 18:09

score 3 · Answer 1 · answered May 20 '13 at 17:50

3

Bootstrap tooltip usage:

<a rel="next" href="http://roadmap.private.net/?p=28" title="Tooltip on top">Fedrer</a>

$(function(){
    $('span.arUp a').tooltip({
        placement: 'top'
    });
});

and make sure you include the bootstrap js file.

answered May 20 '13 at 17:50

karthikr

97,368
26
197
188

i have included bootstrap file but i am not getting any tooltip – Engineer May 20 '13 at 17:54
check the usage. That is now how you invoke the tooltips – karthikr May 20 '13 at 17:55
I have included bootstrapmin.js and jQuery('span.arUp a').tooltip({ placement: 'top', title: 'Test' }); . But error is tooltip is not a function – Engineer May 20 '13 at 17:57
it is bootstrap.min.js. - Check for console log errors if any. – karthikr May 20 '13 at 18:04

RaphaelDDL · Answer 2 · 2013-05-20T17:58:44.910

1

Since you are using the data-*, you are using the auto mode of the tooltip, which it automatically adds itself to the elements it finds.

Since you are adding the data-* with JS instead of directly into the HTML, you need:

Add the .js file AFTER your additions

or

Call $('span.arUp a').tooltip after your code.

edited May 20 '13 at 17:58

answered May 20 '13 at 17:53

RaphaelDDL

4,452
2
32
56

I have included bootstrapmin.js and jQuery('span.arUp a').tooltip({ placement: 'top', title: 'Test' }); . But error is tooltip is not a function – Engineer May 20 '13 at 18:00
@SankalpMishra `is not a function` means it does not loaded or does not exist. Open your bootstrapmin and do a quick Ctrl+F looking for "tooltip". Sometimes you got a build without it. And don't forget to put your code inside a `$(document).ready(function(){ /*yourstuff*/ });` – RaphaelDDL May 20 '13 at 18:05

score 1 · Answer 3 · edited May 23 '17 at 11:43

If you need the tooltip feature to work with dynamic elements, you can try this:

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

DEMO: http://jsfiddle.net/FHjVs/1/

Then, whenever an element has an attribute data-toggle="tooltip", a tooltip will be applied, without having to run JavaScript/jQuery code.

Reference:

How do I bind Twitter Bootstrap tooltips to dynamically created elements?

Bootstrap tooltip usage

3 Answers3