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!

The tooltip is being initiated in the application.js file in twitters example. Can you post your html? Would like to take a look at how you're initializing the script. — Andres I Perez, Feb 25 '12 at 18:14
Ahhhhh.... I ignored that given the first comment. So should this work: `code`test — Mike Bartlett, Feb 25 '12 at 20:33
don't forget to pass a selector to the tooltip options, `$('.tooltip-test').tooltip({ selector: "a" })` — Andres I Perez, Feb 25 '12 at 21:01
Thanks Andres. Actually I didn't seem to need the selector in there, I think that's because the class of the a is referenced as tooltip-test. — Mike Bartlett, Feb 25 '12 at 21:28
Without the selector option the tooltip does not work for me, here is a demo i put up: http://jsfiddle.net/VXctp/, try it without the selector. — Andres I Perez, Feb 25 '12 at 22:06
Has this been resolved? If not, then make sure that you are using the latest version of JQuery - I upgraded to [JQuery 1.7.2](http://code.jquery.com/jquery-1.7.2.min.js) to make this work — My Head Hurts, Apr 24 '12 at 11:15
If it's not working for you, make sure to include Popper BEFORE Bootstrap in your head. — Justin, Dec 02 '19 at 06:44

score 293 · Answer 1 · edited Jan 10 '13 at 21:43

293

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.

edited Jan 10 '13 at 21:43

Tim

88
6

answered Feb 26 '12 at 14:14

Manuel Ebert

8,429
4
40
61

14

For those working with Rails, this is already defined in `bootstrap.js.coffee` with `$(".tooltip").tooltip()`. Just make sure to include `//= require bootstrap` in your `application.js`. – slhck Apr 15 '12 at 17:08
6

Adding the class .tooltip to any element will break the tooltips for me. The content inside the element with the class .tooltip will hide and the tooltip will show if I manage to found the hidden element in with my mouse. Using any other selector or class name will work fine.\ – Leonel Galán Feb 12 '13 at 20:06
4

@Leito that is correct, bootstrap defines styles for `.tooltip` and by default, they are invisible. You can use the `rel` attribute or any other class as a selector, though. – Manuel Ebert Feb 12 '13 at 22:26
3

Yes, you need BOTH the HTML Markup and the JS Selectors. These are not alternative ways to apply tooltips. – ATSiem May 14 '13 at 23:22
1

Some might be trying to display a tooltip in a modal and this does not work in all bootstrap versions. If you try it in a normal page, not a modal, and it works, then you know that's the problem. – mjnissim Aug 20 '13 at 20:01
1

You can also run into problems trying to run tooltips from pages loaded with AJAX. Try it on a portion of the page that is not dynamically loaded with Ajax and see if it works then. – mjnissim Aug 20 '13 at 20:18
Thank you for this! If i initialize all at once, how can i define another direction for some tooltips? Can options be set even in the tag attribute? – metamagikum Nov 24 '13 at 05:12
Got it: I use $("[rel='tooltip-bottom']").tooltip({placement:'bottom'}); and the accoarding attribute value rel="tooltip-bottom" or easyer add the data-placement="bottom" tag. – metamagikum Nov 24 '13 at 05:23
@slhck could you be more specific please? What version of Rails, or what gem, initializes Bootstrap tooltip behind the scenes? I'm seeing it in Rails 3.2.17 using boostrap-sass-3.1.1.0 but I can't find any line of code that does that – Isaac Betesh Mar 04 '14 at 16:15
@IsaacBetesh Honestly, I don't remember – this was 1.5 years ago. The code we were using at the time was this: https://github.com/maphub/maphub-portal – slhck Mar 04 '14 at 17:53
Thank you. I think you were referring to a different gem than bootstrap-sass. Maybe twitter-bootstrap-rails? I think what I saw was Chrome's native tooltip feature, not any JS library. – Isaac Betesh Mar 04 '14 at 18:48
I was confused by bootstrap docs; I thought you needed no javascript, just the data attribute. – dudeNumber4 Sep 30 '14 at 18:58
1

Thanks @Manuel Your suggestion fixed the tooltip for me. I'm using `Rails 4.2` Before that, I had bootstrap required in `application.js` but it wasn't work. Also I found I need to have `rel="tooltip"` declared in my HTML otherwise that JS function wouldn't work. – egyamado Feb 05 '15 at 14:34

score 263 · Answer 2 · edited Dec 23 '22 at 06:09

263

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]' });
});

edited Dec 23 '22 at 06:09

starball

20,030
7
43
238

answered Mar 21 '14 at 20:54

ImaJedi4ever

3,291
1
18
11

21

Thanks! This worked for me. Somehow the other solutions on this page weren't working for me. – Roman Jul 27 '14 at 04:41
1

I'm with Roman. This solution works with the bootswatch css variants as well. – DaveCS Oct 04 '14 at 01:00
This worked for me. Nothing else kicked it into life until I tried this. Thanks! – Blake Petersen Nov 17 '14 at 05:56
1

This worked for me too. Any idea why $('[data-toggle="tooltip"]').tooltip({'placement': 'top'}); doesn't work? – ZeroCool May 07 '15 at 10:23
Thanks, this worked for me. Just make sure that you insert the code between – GeraldScott Apr 09 '16 at 13:56
1

Thanks, it seems that - it depends where your component is placed. In my case when it was just in main container it worked like in bootstrap doc, but when I put him into bootstrap tree it stopped to work. This solution fixed my problem – robson Jun 14 '16 at 12:53
This still works for 4.1.3, unlike the default `$('body').tooltip()` and the answer of Manuel Ebert. – VDWWD Sep 01 '18 at 23:27
the selector is missing the quotes around the operand – daslicious Sep 07 '19 at 07:34
this working so well, turns out tooltip need selector property.. you can't just do `$('body').tooltip();` it needs the selector property – Yosafat Ksatria Jan 04 '23 at 13:47
@ZeroCool i think it missed by the div element tree like robson comment – Yosafat Ksatria Jan 04 '23 at 13:49

score 33 · Answer 3 · edited Jun 20 '20 at 09:12

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 http://twitter.github.com
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...

Max O. · Answer 4 · 2016-03-22T20:05:56.097

29

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>

edited Mar 22 '16 at 20:05

answered Mar 22 '16 at 19:56

Max O.

528
5
14

2

Thanks for sharing this opt-in concept! Never read it from any tutorials. – kazinix Feb 03 '17 at 06:20
The solution to all of my jquery/bootstrap tooltip whoas – DJ Burb Jan 23 '18 at 17:08
Provided link is missing : please look at https://getbootstrap.com/docs/4.1/components/tooltips/ – Guillaume Husta Dec 13 '18 at 09:14

score 24 · Answer 5 · answered Apr 21 '14 at 15:05

24

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.

answered Apr 21 '14 at 15:05

Ihor Shvydok

351
2
8

2

This proposal worked perfectly for me as well. I liked it because it is simple and elegant. It lets you keep using [Bootstrap](http://getbootstrap.com/javascript/) standards as if the plugin came initilized by default, like happens with Dropdown and Tab elements. I added the JS proposed by @Igor to a new file and [bundled it](http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification) to the original bootstrap.js – Iago Rodríguez May 08 '14 at 16:27

score 20 · Answer 6 · answered Aug 02 '13 at 22:52

20

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>

answered Aug 02 '13 at 22:52

Amir Soleymani

355
1
3
9

This was the only solution which worked for me. I'm using data-original-title="{{someAngularJSVar}}" to update the title and it is working flawlessly. – WKara May 10 '18 at 09:38

Shital Shah · Answer 7 · 2014-01-02T06:46:50.480

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.

I'm struggling with this one because the dynamic generation goes several levels deep. The href value is dynamically generated content and the resulting div id is based on the item number that matches the href value. So if I've got a page of links of Item Type A, then I have a list of item a-1, item a-2, item a-3, each of those links is to the items individual page, but I want the tooltip content to display dynamic content on hover, so the user can get some idea of the item before clicking on the full link. — Melanie Sumner, Feb 25 '14 at 15:16
This was the most helpful. I had the tooltip set to bind to an icon, and the icon library had some sort of asynchronous loading so it could not bind. It was so strange because it would work when using a class selector but not ID. Thank you for your help! — Nick Woodhams, Jul 03 '18 at 06:28

score 15 · Answer 8 · edited Feb 16 '18 at 16:11

15

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>

edited Feb 16 '18 at 16:11

icfantv

4,523
7
36
53

answered Aug 05 '14 at 13:18

Marcos Cassiano

817
8
12

2

please close the type attribute... editing just a single typo is a PITA :S – Mohd Abdul Mujib Sep 05 '14 at 01:27

score 10 · Answer 9 · answered May 01 '13 at 10:07

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();
});

Dexter · Answer 10 · 2023-03-20T12:42:17.613

// Update

Mar 2023: Included Tooltip for Bootstrap v5.x and v4.x

Bootstrap v5.x (Tested)

Step 1

Include the Bootstrap CSS

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

Step 2

Add the HTML

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-placement="left" title="I'm a Working Tooltip">Hover me!</button>

Step 3

Include all the scripts. You also need to activate the tooltip. If you want to move the jquery you can move it to an external file activate-tooltip.js.

Tooltips are opt-in for performance reasons, so you must initialize them yourself.

See the FAQ below to know the script order.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<script type="text/javascript">
// If you do not want to use jQuery you can use Pure JavaScript. See FAQ below
$( document ).ready(function() {
    $('[data-bs-toggle="tooltip"]').tooltip();
});
</script>

Bootstrap v4.x (Tested)

Step 1

Include the v4 css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Step 2

Add the HTML. Note that the data-toggle is for v4 and data-bs-toggle for v5

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="I'm a Working Tooltip">Hover me!</button>

Step 3

See Step 3 in Bootstrap V5.x. The only change you need to make is to change the data-toggle.

FAQ

What happens if you do not include jQuery?
jQuery is to enable the tooltip. If not included tooltip won't work as expected and you will also get the Uncaught ReferenceError: $ is not defined error in your console.

Without jQuery

With jQuery

I'm not seeing a small arrow in the tooltip.
Make sure you use the correct Bootstrap CSS version

What is the correct script order?
You can use single script bootstrap.bundle.js or use two scripts popper.min.js and bootstrap.min.js with jquery and activate-tooltip.js

activate-tooltip.js is a one-line to activate the tooltip. See Step 3

Tooltips rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js in order for tooltips to work!

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/activate-tooltip.js"></script>

// or

<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/activate-tooltip.js"></script>

Can I use Vanilla JS instead of jQuery?
Yes, use this code. From the Documentation

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
});

Bootstrap 5 is designed to be used without jQuery, your step 2 is not the best solution. — probitaille, Nov 24 '22 at 18:24
if one intends to use jquery for other reasons and is available then why not use it? is it sin? — Aadam, Mar 08 '23 at 19:20

score 5 · Answer 11 · answered Jun 10 '15 at 09:50

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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></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>

score 4 · Answer 12 · edited Jul 11 '12 at 06:52

4

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.

edited Jul 11 '12 at 06:52

Druid

6,423
4
41
56

answered Jul 06 '12 at 08:20

Harish Kumar

403
4
3

Mike Stillion · Answer 13 · 2016-02-28T14:21:51.623

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>

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 Template Tooltips (such as INSPINIA)

If you are using a bootstrap template (such as INSPINIA), you are including a supporting script to support the template features:

    <script src="/Scripts/app/inspinia.js" />

In the case of INSPINIA, the included script automatically initializes all tooltips by running the following javascript code when the document is finished loading:

// Tooltips demo
$('.tooltip-demo').tooltip({
    selector: "[data-toggle=tooltip]",
    container: "body"
});

Because of this, you do NOT have to initialize INSPINIA-style Tooltips yourself. But you DO have to format your elements in a specific way. The Initializer looks for HTML elements with tooltip-demo in the class attribute, then calls the tooltip() method to initialize any child elements that have the attribute data-toggle="tooltip" defined.

For our example badge, place an outer element around it (like a <div> or <span>) that has class="tooltip-demo", then place the data-toggle, data-placement, and title attributes for the actual tooltip within the element that is the badge. Modify the original HTML from above to look something like this:

BEFORE

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

AFTER

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

INITIALIZER

None

Note that any child elements within the <span class="tooltip-demo"> element will have their tooltip properly prepared. I could have three child elements, all needing tooltips, and place them within one container.

Multiple Items, each with a Tooltip

<span class="tooltip-demo">
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>

The best use for this would be to add the class="tooltip-demo" to a <td> or an outermost <div> or <span>.

Plain Bootstrap Tooltips while using a Template

If you are using INSPINIA, but you don't want to add extra outer <div> or <span> tags to create tooltips, you can use standard Bootstrap Tooltips without interfering with the template. In this case, you will be responsible for initializing the Tooltips yourself. However, you should use a custom value in the class attribute to identify your Tooltip items. This will keep your Tooltip initializer from interfering with elements affected by INSPINIA. In our example, let's use standalone-tt:

BEFORE

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

AFTER

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

INITIALIZER

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $('.standalone-tt').tooltip();
        }
    );
</script>

score 4 · Answer 14 · answered Nov 09 '19 at 21:32

4

you can use Popper.js

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

And call tooltip function:

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

answered Nov 09 '19 at 21:32

Mohsen TOA

759
10
17

"Tooltips rely on the 3rd party library `Popper.js` for positioning. You must include `popper.min.js` before `bootstrap.js` or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains `Popper.js` in order for tooltips to work!" – drake7 Apr 06 '22 at 17:52

score 3 · Answer 15 · answered Sep 29 '12 at 04:44

3

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"

answered Sep 29 '12 at 04:44

Andres Calle

257
1
3
11

Was really hoping that was going to work for me, but alas it did not. – turboladen Mar 09 '13 at 05:55
Now I am more into Djanto than Rails but if you paste your code I might try to give you some tip. – Andres Calle Mar 10 '13 at 19:34

score 3 · Answer 16 · answered Dec 13 '12 at 11:38

3

In my particular case, it didn't work because I was including two versions of jQuery. One for bootstrap, but another one (another version) for Google Charts.

When I remove the jQuery loading for the charts, it works fine.

answered Dec 13 '12 at 11:38

Dieter

1,690
2
15
28

score 3 · Answer 17 · answered Jul 17 '13 at 23:49

3

If you are creating your html that contains the tooltip with javascript, and then inserting it into the document, you have to activate the popover/tooltip AFTER you have inserted the html into the document, not on document load...

answered Jul 17 '13 at 23:49

chri_chri

310
4
12

score 3 · Answer 18 · answered Oct 10 '14 at 07:42

3

I just added:

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

below bootstrap.min.js and it works.

answered Oct 10 '14 at 07:42

Andy.sin

56
6

score 3 · Answer 19 · answered Mar 01 '12 at 14:50

3

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>

answered Mar 01 '12 at 14:50

Karthik

228
1
3
8

3

In this case the DOM hasn't loaded yet so all elements my not exist on the page. Wrap the code above in `$(function() { ... });` – johnml Apr 24 '12 at 20:23

Zoom · Answer 20 · 2014-01-28T08:56:26.120

You must put the tooltip javascript after the html. like this :

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script>

Or use $(document).ready :

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

});

</script>

The tooltip not working because you put the tooltip html before the javascript, so they don't know if there is a javascript for the tooltip. In my opinion, the script is read from the top to the bottom.

score 2 · Answer 21 · answered Jun 11 '14 at 15:30

2

I had a similar issue and especially if you are running in a button container like a vertical button container. In that case you have to set the container as the 'body'

I have added a jsfiddle example

example

answered Jun 11 '14 at 15:30

Shawn Vader

12,285
11
52
61

score 1 · Answer 22 · answered May 30 '12 at 18:27

Put your code inside document ready

$(document).ready(function () {
    if ($("[rel=tooltip]").length) {
        $("[rel=tooltip]").tooltip();
    }
});

In my case I was also missing the tooltip css classes on http://twitter.github.com/bootstrap/assets/css/bootstrap.css so son't forget that.

score 1 · Answer 23 · answered Aug 20 '18 at 13:13

From bootstrap docs on tooltips

Tooltips are opt-in for performance reasons, so you must initialize them yourself. One way to initialize all tooltips on a page would be to select them by their data- toggle attribute:

  $('[data-toggle="tooltip"]').tooltip()

score 0 · Answer 24 · edited Jan 29 '19 at 07:34

0

You need to do the following. Add the

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

code somewhere on your page (preferably in the <head> section).

Also add data-toggle: "tooltip" to anything you want to enable with it.

edited Jan 29 '19 at 07:34

Ali Sheikhpour

10,475
5
41
82

answered Jul 16 '17 at 12:57

Calum Childs

337
2
12

score 0 · Answer 25 · answered Sep 30 '17 at 06:54

0

Add data-toggle="tooltip" at whatever elements you want with a tooltip.

answered Sep 30 '17 at 06:54

Calum Childs

337
2
12

score -1 · Answer 26 · answered May 13 '17 at 16:40

Quick and lighter alternative to Bootstrap tooltip plugin:

HTML:

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS:

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JSCRIPT:

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
});

Label/text must be enclosed in a wrapper of class "mytooltip" This wrapper must have an Id.

After the label there is the tool tip text wrapped in a div of class "mytooltiptext" and id consisting of the id of the parent wrapper + "_tttext". Other options for selectors can be used.

Hope it helps.

Bootstrap tooltips not working

26 Answers26

Bootstrap v5.x (Tested)

Step 1

Step 2

Step 3

Bootstrap v4.x (Tested)

Step 1

Step 2

Step 3

FAQ

NOTE:

WORKING EXAMPLES

Plain Bootstrap Tooltips

Bootstrap Template Tooltips (such as INSPINIA)

Multiple Items, each with a Tooltip

Plain Bootstrap Tooltips while using a Template

HTML:

CSS:

JSCRIPT:

Linked

Related