CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap-tooltip
Alok
Alok

Reputation: 8998

Bootstrap tooltip is not working on my web project

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.

  1. To take the class name into consideration

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

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

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

  3. 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:

Final Result on the 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:

Error on the console

Upvotes: 5

Views: 26126

Answers (7)

Sandip Mahato
Sandip Mahato

Reputation: 101

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

Upvotes: 0

LaPlagaPR
LaPlagaPR

Reputation: 11

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

Upvotes: 0

Christopher Reeve
Christopher Reeve

Reputation: 478

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

Upvotes: 0

Mohsen TOA
Mohsen TOA

Reputation: 809

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

Upvotes: -2

Fabul
Fabul

Reputation: 166

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>

Upvotes: 4

Alok
Alok

Reputation: 8998

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>

Upvotes: 1

SantoshK
SantoshK

Reputation: 1877

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>

Upvotes: 1

Related Questions