Bootstrap tooltip is not working on my web project

Question

I'm actually in a very weird situation and somehow can't be able to figure out what non-sense is happening to me. The situation is I'm actually implementing my bootstrap tooltip fine and I have checked it on the JsFiddle, it is working fine there too, however, after a lot of efforts, it is not getting implemented on the web project, I don't know why.

This is literally very weird. Here is my implementation which is working fine on JsFiddle.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- jQuery Script -->
    <script src="https://code.jquery.com/jquery-1.12.0.js"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- Popper.js, then Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    <script type="text/javascript">
      $(document).ready(function (){
        $("[data-toggle=tooltip]").tooltip()
      })
    </script>
  </head>
  <body>
     <section class="testimonial home-page" id="home">
      <div class="container">
        <h1>Bringing ease to<br>each home</h1>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
        <div class="d-none d-sm-block" style="margin-top: 400px"></div>
      </div>
    </section>
  </body>

And for the solutions I have done a lot of things but, unfortunately, all of them didn't work.

To take the class name into consideration

<script type="text/javascript">
  $(document).ready(function (){
   $(".btn-secondary").tooltip()
  })
</script>

To use the body element to target the data-toggle :

<script type="text/javascript">
  $(document).ready(function (){
    $("body").tooltip({
      selector : '[data-toggle=tooltip]'
    })
  })
</script>

To use the container as body and focus on the section :

<script type="text/javascript">
  $(document).ready(function (){
    $(".testimonial.home-page").tooltip({
      selector : '[data-toggle=tooltip]',
      container : 'body'
    })
  })
</script>

This is what I'm getting on my web project:

Don't take me wrong, I'm really confused about why it ain't happening since everything is fine. Any ideas would be appreciated, I'm a noob and I know that you guys can help me on this.

EDITS

I have checked the console and got this error saying the .tooltip is not a function:

I ran your code and the tooltip appeared. I can't reproduce your problem. — Quentin, Apr 25 '18 at 08:33
@Quentin, that is why I'm finding a problem in that. It is very weird and hence taking my all efforts, still not getting resolved. I have commented the second jquery loading from my project but still not working — Alok, Apr 25 '18 at 08:34
it seems that something isn't imlemented. I recommend proof all your steps, (*Edit: sorry didn't see the script tag). Which brwoser your running? (Version). Or could you maybe send an url to look at? — Rakowu, Apr 25 '18 at 08:35
@Quentin I have the error in my console, kindly take a look t that — Alok, Apr 25 '18 at 08:43
@Rakowu, please see my edits. Thanks. hope you will get the idea, weird that the tooltip function is not getting recognized. — Alok, Apr 25 '18 at 08:43
Removed the loading of jquery twice, still facing the same issue @Vitalii — Alok, Apr 25 '18 at 08:50
in your script you have: crossorigin="anonymous", is it a iframe what your are trying to run? *Edit: ok sorry i see, bootstrap implemented his cdn in this way. sorry my bad for not reading well. — Rakowu, Apr 25 '18 at 08:51
Try to debug a bit. Push console.log($(document).tooltip) inside your init script — Drag13, Apr 25 '18 at 08:55
I guess the question is a bit silly but, Is the closing html tag missing? — Rakowu, Apr 25 '18 at 08:56
No, it is not missing, otherwise my whole project would not have been running. @Rakowu Could you please look at my edits, because the problem is there only since the jquery is not able to identify the **tooltip()** — Alok, Apr 25 '18 at 08:59
@Vitalii It is coming `undefined` in the console with the error which I just mentioned in the EDITS. Tooltip function is not getting recognized by the jquery — Alok, Apr 25 '18 at 09:03
@AlokKumarVerma And one more thing. After a while, try to do the same check with console directly from console manually. Not from code. — Drag13, Apr 25 '18 at 09:14
I run your code on my webspace and everything work fine. What webserwer do you use? Maybe there are some restrictions? What happens when you run jquery and bootsrap on your server instead of cdn ? — Rakowu, Apr 25 '18 at 09:21

score 4 · Answer 1 · answered Apr 25 '18 at 10:38

Try to call the Tooltip function in this way and pass the options as HTML attributes. You can check out some working examples here.

<button class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Basic tooltip">Hover me</button>

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

score 1 · Answer 2 · answered Apr 25 '18 at 09:07

You need to add few attributes inside tooltip function {container:'body', trigger: 'hover', placement:"bottom"}

 $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(
        {container:'body', trigger: 'hover', placement:"bottom"}
        );   
    });

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- jQuery Script -->
    <script src="https://code.jquery.com/jquery-1.12.0.js"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- Popper.js, then Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    
  </head>
  <body>
     <section class="testimonial home-page" id="home">
      <div class="container">
        <h1>Bringing ease to<br>each home</h1>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
        <div class="d-none d-sm-block" style="margin-top: 400px"></div>
      </div>
    </section>
  </body>

As far as I understand he can't call .tooltip cause it is undefined. — Drag13, Apr 25 '18 at 09:13
@Vitalii and alok for .tooltip undefined there is two case ... first bootstarp js not called properly or you need to add title in element when you use tooltip.. same case also listed on github https://github.com/almasaeed2010/AdminLTE/issues/1128 — SantoshK, Apr 25 '18 at 09:26

score 1 · Answer 3 · answered Apr 25 '18 at 09:42

Solution is this, there was an error in calling of some jQuery files which was not called properly and hence whole project was messing up. So if you are using the popups, tooltips then make sure you call the jquery in a correct format. Here is the answer and how I got it working, just look at the calling of jQuery files and the other files accordingly and then in body I have called the script for the tooltip :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="style.css">

    <!-- SLICK SLIDER-->
    <link rel="stylesheet" type="text/css" href="assets/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="assets/slick/slick-theme.css"/>

    <!-- MATERIAL ICONS-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <!-- jQuery first, then jQuery min.js, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  </head>
  <body>
    <section class="testimonial home-page" id="home">
      <div class="container">
        <h1>Bringing ease to<br>each home</h1>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
        <div class="d-none d-sm-block" style="margin-top: 400px"></div>
      </div>
    </section>
    
    <script type="text/javascript">
      $(document).ready(function (){
        $('[data-toggle="tooltip"]').tooltip({
          container : 'body'
        })
      })
    </script>
  </body>

score 0 · Answer 4 · answered May 05 '20 at 08:50

use this

HTML

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

jQUERY

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

get it from other thread https://stackoverflow.com/a/22569369/11934267

score 0 · Answer 5 · answered Apr 01 '21 at 13:18

0

My issue was the tooltips css conflicting .tooltip-inner and .tooltip coming from the _tooltip.scss files this was setting an opacity:0;

answered Apr 01 '21 at 13:18

LaPlagaPR

11
3

score 0 · Answer 6 · answered Jul 27 '22 at 05:23

If you are using Bootstrap V5 or higher you have to enable the tooltip manually.

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

For more info check out this Enable Tooltip

Mohsen TOA · Answer 7 · 2019-11-09T21:32:22.510

-2

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

edited Nov 09 '19 at 21:32

answered Nov 09 '19 at 21:27

Mohsen TOA

759
10
17

Bootstrap tooltip is not working on my web project

7 Answers7