Bootstrap 3 tooltip not working

Following a really outdated bootstrap tutorial, but it is really well structured so trying to finish the course. I have been able to fix most of the issues by looking at bootstrap documentation, and I am a bit stuck on making the tooltip work on the main index.php page. Bare in mind, I am new to web dev.

I can get the tooltip to work if the script is on the same php file. As shown below:

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

Inside the body:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip : left">Tooltip : Left</button>

However if I remove the script from index.php, and place it inside myscript.js. It won't work, I've tried different ways and search through SO tried just about every suggestion in the past and nothing seems to work. I know that myscript.js is being loaded because I have another function there for hovering over a menu dropdown, also no errors on the console.

Inside myscript.js

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

I've also tried this:

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

Any suggestions as to why is not working?

2 answers

  • answered 2017-06-17 20:01 Daniel H

    The code is ok, I don't know your bootstrap version and how you setup so I could guess that could be the problem.

    Also, you try to add a left tooltip, but you need some space for it to show so check the following example.

    $(document).ready(function() {
      $('[data-toggle="tooltip"]').tooltip();
    });
    #mybtn {
      margin-left: 200px;
      margin-top: 100px;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <button id="mybtn" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip : left">Tooltip : Left</button>

  • answered 2017-06-17 20:01 fredz0003

    Finally figure it out, although not exactly sure why. Perhaps someone can comment why.

    Anyways inside head tags I was calling my script as follows:

    <script src="_/js/myscript.js"></script>
    

    It should have been:

    <script type="text/javascript" src="_/js/myscript.js"></script>
    

    It is strange because I was calling two other methods inside, and those worked fine. Tooltip was the only one not working until I added type to the script tags.

    (function(){
    
        // highlight the current nav
        /*
        * Target the page id, i.e. #home
        * Then look for anchor tag that cotaints specific word
        * lastly add active class
        */
        $("#home a:contains('Home')").parent().addClass("active");
        $("#about a:contains('About')").parent().addClass("active");
        $("#artists a:contains('Artists')").parent().addClass("active");
        $("#schedule a:contains('Schedule')").parent().addClass("active");
        $("#venue a:contains('Venue')").parent().addClass("active");
        $("#register a:contains('Register')").parent().addClass("active");
    
        // make menus drop automatically
        $('nav.navbar div.collapse ul.nav li.dropdown').hover(function(){
            $('ul.dropdown-menu', this).fadeIn();
        }, function(){
            $('ul.dropdown-menu', this).fadeOut('fast');
        });
    
        // tooltip over photogrid
        $("[data-toggle='tooltip']").tooltip();
    
    });