Bootstrap tooltips not working

Question

I'm going mad here.

I've got the following HTML:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

And the Bootstrap style tooltip refuses to display, just a normal tooltip.

I've got bootstrap.css working just fine, and I can see the classes in there

I've got all of the relevant JS files at the end of my HTML file:

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

I've looked at the source of Bootstrap's example and cannot see anything that initiates the tooltip anywhere in there. So I'm guessing it should just work, or am I missing something vital here?

I've got modals and alerts and other things working just fine, so I'm not a total moron ;)

Thanks for any help!

Answer 1

If you do $("[rel='tooltip']").tooltip(); as other answers have suggested then you will activate tooltips only on elements that are currently there in DOM. That means if you are going to change DOM and insert dynamic content later it won't work. Also this is much less efficient because it installs event handler for individual elements as opposed to using JQuery event delegation. So the best way I've found to activate Bootstrap tooltips is this one line of code that you can place in document ready and forget about it:

$(document.body).tooltip({ selector: "[title]" });

Note that I'm using title as selector instead of rel=title or data-title. This has an advantage that it can be applied to many other elements (the rel is supposed to be only for anchors) and also it works as "fallback" for old browsers.

Also note that you don't need data-toggle="tooltip" attribute if you are using above code.

Bootstrap tooltips are expensive because you need to handle mouse events on each of the elements. This is the reason why they haven't enabled it by default. So if you ever decide to comment out above line, your page would still work if you use title attribute.

If you are OK not to use title attribute then I would recommend using pure CSS solution such as Hint.css or check http://csstooltip.com which does not require any JavaScript code at all.

Answer 2

If everything is still not resolved Use Latest Jquery library, you dont need any of the jquery selectors if you use the latest bootstrap 2.0.4 and jquery-1.7.2.js

Just use rel="tooltip" title="Your Title" data-placement=" "

Use top / bottom / left / right in the data-placement as per your wish.

Answer 3

To sum up: activate your tooltips using jQuery selectors

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

In fact, you don't need to use the attribute selector, you can invoke it on any element even if it doesn't have rel="tooltip" in its tag.

Answer 4

If using Rails+Haml is much easier to include the tooltip, just do:

= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"

That is just add the following line at the end of the element.

:rel => "tooltip", :title => "Referential Guide"

Answer 5

I have added jquery and bootstrap-tooltip.js in header. Adding this code in footer works for me! but when i add the same code in header it doesn't work!

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>

Answer 6

http://getbootstrap.com/javascript/#tooltips-usage

Opt-in functionality For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning

you must initialize them yourself.

One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

<script>
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
</script>

putting this piece of code in your html allows you to use the tooltips

Examples:

<!-- button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>