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!

Accepted Answer

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 2

After experiencing the same problem, I found this solution worked without having to add additional tag attributes outside of the Bootstrap required attributes.

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

Hope this helps!

Answer 3

You don't need all js files separately

Just use the following files if you are going to use all bootstrap functions:

-bootstrap.css
-bootstrap.js

both of them can be found in
and finally
-Latest version of jquery.js

For Glyphicons you need the image

glyphicons-halfings.png and/or glyphicons-halfings-white.png(white coloured images)
which you need to upload inside /img/ folder of your website (or) store it where ever you want but change the folder directory inside the bootstrap.css

For tooltip you need the following script inside your <head> </head> tag

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

That's it...

Answer 4

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>

Answer 5

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

This one is work for me.

Answer 6

I know this is an old question, but since I had this problem with the new release of bootstrap and its not clear on the website, here is how you enable the tooltip.

give your element a class like "tooltip-test"

then activate this class in your javascript tag:

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>

Answer 7

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 which does not require any JavaScript code at all.

Answer 8

This is the simplest way. Just put this before </body>:

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

Check out the examples given in the Bootstrap's documentation about tooltips.

For example:

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>

Answer 9

Tooltip and popover are NOT only-css plugins like dropdown or progressbar. To use tooltips and popover, you MUST to activate them using jquery (read javascript).

So, lets say we want a popover to be shown on click of an html button.

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

Then you need to have following javascript code to activate popover:

$('.popovers-to-be-activated').popover();

Actually, above javascript code will activate popover on all the html elements which have class "popovers-to-be-activated".

Needless to say, put the above javascript inside DOM-ready callback to activate all popovers as soon as DOM is ready:

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});

Answer 10

in head section you need to add the following code first

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>

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

Then in the body section you need to do write the following code

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

Answer 11

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 12

Lets use an example to show how the Tooltips can be added to any HTML element in your document.

NOTE:

If these tooltip samples don't work when you put them in your page, then you have another problem. You need to look at things like:

The order of scripts being included
See if you are trying to initialize HTML elements that have been removed
See if you are trying to call methods in JS files you are no longer including

See if you are including the JS file that provides the functionality you need (not just for tooltips, but any components you use on the page).

<head>
    <link rel="stylesheet" href="/Content/bootstrap.css" />
    <link rel="stylesheet" href="/Content/animate.css" />
    <link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
    ... your HTML code ...
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
    ... your JavaScript initializers ...
</body>

Failure of ANY of the above items can (and often does) prevent javascript from loading and/or running, and that keeps everything nice and broken.

WORKING EXAMPLES

Let's say you have a badge, and you want it to show a tooltip when the user hovers over it.

Original HTML:

<span class="badge badge-sm badge-plain">Admin Mode</span>

Must Read

Plain Bootstrap Tooltips

If you are creating tooltips for an HTML Element, and you are using Plain Bootstrap tooltips, then you will be responsible for calling the Tooltip Initializers with your own JavaScript code.

BEFORE

<span class="badge badge-sm badge-plain">Admin Mode</span>

AFTER

<span 
    class="badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

INITIALIZER

<script>
    // Initialize any Tooltip on this page
    $(document).ready(function () 
        {
            $('[data-toggle="tooltip"]').tooltip();
        }
    );
</script>

Bootstrap Tooltips Not Working

26 Answers

NOTE:

WORKING EXAMPLES

Must Read

Plain Bootstrap Tooltips

David Miller