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?

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?

• javascript
• php
• jquery
• twitter-bootstrap

4 Answers 4

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./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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>

The correct answer for this issue was chrome cache. I use dev tools to disable the cache. Disabling Chrome cache for website development I found out when I stumbled across another issue.

If you're using jquery ui, then load the scripts in following order.

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

In my case, it simply worked when I put the jquery link in the head tag instead of the body tag. Probably because of how the js loads.