Bootstrap tooltip doesn't show style of the tooltip, only data

Question

Trying to make Bootstrap show the tooltip function, I have followed exactly as Bootstrap DOC about Tooltips and declare my attribute and properties. when I hover over the text the data Some tooltip text! shows as there is alt="" function only, but not in style as Bootstrap mentioned in their document.

Steps I have taken to resolve this issue:

Include tooltip.js from external CDN
activate tooltip throw <Script>$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});</script>
Add Google API of jQuery (I know is not neccessery)
check if the page is loading the Bootstrap CDN and external ones (All Do!)

Header HTML Markup

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

HTML Markup

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

Here is an image of how it shows.

enter image description here

You are including the `bootstrap.min.css` twice, both from external CDN and locally. You should only include it once. — PalinDrome555, Aug 05 '14 at 19:17
@PalinDrome555 Removed it, I didn't know that make different. :/ ...but still no change made to style of tooltip — Brian Nezhad, Aug 05 '14 at 19:19
jQuery needs to come before bootstrap.min.js. Swap the order of your script tags. — jme11, Aug 05 '14 at 19:20
@jme11 this is how Bootstrap set it up [link](http://getbootstrap.com/getting-started/) , please check **Bootstrap CDN** ... I have change it but nothing change the tooltip — Brian Nezhad, Aug 05 '14 at 19:22
Look further down that same page and you'll find the example template. Trust me. Bootstrap.js has a dependency on jQuery. You need to load it first. — jme11, Aug 05 '14 at 19:24
Well, i include `js/bootstrap.min.js` in footer and remove the Google API from header and no change still made :( @jme11 — Brian Nezhad, Aug 05 '14 at 19:30

score 44 · Answer 1 · answered Mar 29 '17 at 11:35

44

Remember also that Bootstrap Tooltip don't like jQuery UI (there are a few names conflict and 'tooltip' is one of them).

The solution is changing the script loading order: jQuery UI first, bootstrap.js after.

answered Mar 29 '17 at 11:35

1_bug

5,505
4
50
58

4

This was my issue. I am not using jQuery UI, but a library we use (jQuery fileupload) does. – ingh.am Mar 29 '17 at 15:02
Huge thanks! I had a problem with data-html attribute, it just didn't work, and scripts reordering helped. – mcmimik Oct 20 '17 at 12:23
2

you can also generate a custom jquery UI without tooltip if not relevant – anvd Oct 18 '18 at 13:30
2

god bless you i have so much struggle – Mr.Sun May 18 '19 at 09:11
1

You are a legend. This saved me! – Kerwin Sneijders Jan 13 '20 at 13:08

score 17 · Accepted Answer · edited Mar 18 '20 at 04:18

Here's a working template for you. My guesses as to what was wrong:

jQuery always needs to come before bootstrap.js.
If you don't have a local server running, you need to add the http: to the CDN addresses.
You may have been trying to initialize the tooltip in the head tags. Problem is that the document probably wasn't ready.

The following works fine.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script>
    $( document ).ready(function() {
        $('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
    });
    </script>
  </body>
</html>

Wow, you solve it man, I needed to initialize it after CDN, but why it didn't worked when the CDN was in header and initialization was after link? @jme11 — Brian Nezhad, Aug 05 '14 at 19:45
Because it was looking for an element with a data-toggle="tooltip" attribute and the element wasn't loaded yet. Think of the page as loading top to bottom. Anyway, it's better to put your js at the bottom of the page before your closing body tag. For users, this will give the impression of faster load times because the page content loads without having to wait for the javascript to load. — jme11, Aug 05 '14 at 19:52
Interesting, Thanks and Cheers! now trying to Enable popovers, do you know if i have initialize it as well? @jme11 — Brian Nezhad, Aug 05 '14 at 19:54
Yes, same concept, just add the initialization inside the same document ready before the closing }); bit. — jme11, Aug 05 '14 at 19:57
I had jQuery before Bootstrap but I've found out, that Bootstrap needs to be even after JQuery UI. — Daniel Székely, Aug 10 '16 at 09:26

Jordan.J.D · Answer 3 · 2014-08-05T19:46:40.043

12

Your problem is more than likely that you failed to initialize the tooltip correctly. Take a look at this bootply

The documents state:

enter image description here

HTML:

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

Jquery:

$("[data-toggle=tooltip").tooltip();

Remember you only need bootstrap.min.css and bootstrap.js for the tooltip to work correctly.
Remember to load scripts and style sheets using absolute URLs (add / in front of path).
bootstrap depends on jquery, load jquery first.

edited Aug 05 '14 at 19:46

answered Aug 05 '14 at 19:35

Jordan.J.D

7,999
11
48
78

I did initialize it, `` – Brian Nezhad Aug 05 '14 at 19:41
@BrianS the only files you need are bootstrap.css and bootstrap.js for the tooltip to work. please add `/` in front of all paths. Other than that, if you fixed the order of script loading, it is in your custom css that makes the problem. – Jordan.J.D Aug 05 '14 at 19:44

score 3 · Answer 4 · answered Jan 03 '20 at 10:26

The OP described precisely the issue I was seeing in Angular 8 with Bootstrap 4.4.1 using JQuery 3.4.1 and not using ng-bootstrap or ngx-bootstrap. The image in the OP is bang on.

Some of the answers were sort of helpful while missing the key point that if the DIV is wrapped in an *ngIf it is difficult to get tooltip() to see that the DIV should have a listener attached to it for mouseenter / mouseleave events. Doing this as the document loads the first time is useless for a single page application where the content is dynamically added and removed.

The critical answer turned up https://github.com/twbs/bootstrap/issues/4215 and codepen https://codepen.io/Johann-S/pen/djJYPb . For me the fix was ...

app.component.ts ... just once in this one file is enough

import { Component } from '@angular/core'
declare var $: any
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.sass']
})
export class AppComponent {
    constructor(){
        $('body').tooltip({
            selector: '[data-toggle="tooltip"]'
        })
    }
}

and in every place the tooltip should be seen (component.html files for me).

<div data-toggle="tooltip" data-placement="top" title="Tool Tip Text">

Binding to the body allows the tooltip selector to see the addition of any 'new' DOM elements irrespective of the timing.

As to the performance hit ... not sure yet :D, though it is mercifully light on typing.

score 1 · Answer 5 · answered Aug 05 '14 at 19:35

1

Try adding this code at the bottom of your HTML i've needed it to trigger the tooltip to work. Add class="ttop" to your tooltips in HTML code.

$(document).ready(function(){
$(".ttop").tooltip({
    placement : 'top'
});
});

answered Aug 05 '14 at 19:35

DivineChef

1,211
1
10
27

score 1 · Answer 6 · answered Sep 19 '17 at 03:59

In my case using AngularJS, even all css/js scripts were sequenced/invoked properly but still wasn't showing.

The issue was it's under from a tag with "ng-if" attribute. After I placed it outside from that tag It works fine.

Maybe there's a slight delay with AngularJS rendering the elements with "ng-if" while jquery is initialising the tooltip.

score 0 · Answer 7 · edited Sep 04 '17 at 09:03

0

You must initialize tooltip like:

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

edited Sep 04 '17 at 09:03

Petter Friberg

21,252
9
60
109

answered Sep 04 '17 at 08:35

Four

31
5

score 0 · Answer 8 · answered Nov 09 '17 at 19:38

0

If you are using popper.js with bootstrap 4, instead of using:

<script src="~/Scripts/popper.min.js"></script>

use the .js in the UMD directory:

<script src="~/Scripts/umd/popper.min.js"></script>

answered Nov 09 '17 at 19:38

Exel Gamboa

936
1
14
25

score 0 · Answer 9 · answered Jun 20 '18 at 11:22

All your jquery*.js files must come before bootstrap.js.

jquery-{version}.js
jquery-confirm.min.js
jquery-ui-{version}.js
jquery.validate*
etc...
bootstrap.js

Then use:

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

Abd Abughazaleh · Answer 10 · 2019-11-23T02:39:32.660

0

make sure if you add bootstrap.min.js and also add

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

edited Nov 23 '19 at 02:39

answered Nov 22 '19 at 21:54

Abd Abughazaleh

4,615
3
44
53

score 0 · Answer 11 · answered Jun 25 '20 at 15:50

This question has been sufficiently answered, but the solutions don't apply; my links were in good order. Turns out that there's a conflict with Font Awesome (FA). For example, this wouldn't work for me:

<span class="fas fa-search" data-toggle="tooltip" title="Search my site"></span>

If I remove the FA classes, and enter text within the span, the tooltips render in the proper style... but isn't a good solution. However, by encapsulating that span within another span does work:

<span data-toggle="tooltip" title="Search my site"><span class="fas fa-search"></span></span>

I hope this helps the odd soul out there. Or two :^)

Bootstrap tooltip doesn't show style of the tooltip, only data

11 Answers11

Linked