javascript - Bootstrap tooltip usage - Stack Overflow

admin管理员组

文章数量:1023744

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="/?p=28" data-placement="top" data-toggle="tooltip" data-original-title="Tooltip on top">Fedrer</a>

But no tooltip is ing. Please help!!

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/?p=28" data-placement="top" data-toggle="tooltip" data-original-title="Tooltip on top">Fedrer</a>

But no tooltip is ing. Please help!!

• javascript
• jquery
• twitter-bootstrap
• tooltip

Share Improve this question Follow edited May 20, 2013 at 17:47 William Buttlicker asked May 20, 2013 at 17:47 William ButtlickerWilliam Buttlicker 6,00055 gold badges3535 silver badges5858 bronze badges 2

• Duplicate of stackoverflow./questions/9446318/… – Carol Skelly Commented May 20, 2013 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 Commented May 20, 2013 at 18:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Bootstrap tooltip usage:

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

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

and make sure you include the bootstrap js file.

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.

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/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?

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="/?p=28" data-placement="top" data-toggle="tooltip" data-original-title="Tooltip on top">Fedrer</a>

But no tooltip is ing. Please help!!

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/?p=28" data-placement="top" data-toggle="tooltip" data-original-title="Tooltip on top">Fedrer</a>

But no tooltip is ing. Please help!!

• javascript
• jquery
• twitter-bootstrap
• tooltip

Share Improve this question Follow edited May 20, 2013 at 17:47 William Buttlicker asked May 20, 2013 at 17:47 William ButtlickerWilliam Buttlicker 6,00055 gold badges3535 silver badges5858 bronze badges 2

• Duplicate of stackoverflow./questions/9446318/… – Carol Skelly Commented May 20, 2013 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 Commented May 20, 2013 at 18:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Bootstrap tooltip usage:

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

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

and make sure you include the bootstrap js file.

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.

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/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?

本文标签： javascriptBootstrap tooltip usageStack Overflow