5

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?

thefern
  • 367
  • 7
  • 19

4 Answers4

2

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>
Dalin Huang
  • 11,212
  • 5
  • 32
  • 49
  • Yeah I know about the left tooltip, just worried about getting the functionality of tooltip for now. Boostrap setup is good, I've used other functionality such as NavBar, and Dropdown menus. I also have the lines for boostrap css, and js, and jquery inside the head tags. – thefern Jun 17 '17 at 20:11
1

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.

thefern
  • 367
  • 7
  • 19
  • The same happens for me with Firefox. When I have 'Disable cache' checked in the Web Developer Tools 'Network' tab, the Bootstrap (v3.3.6) tooltip doesn't work. When I uncheck it, the tooltip does work! – Sicco Jan 17 '22 at 12:12
0

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>
Thanooshan
  • 598
  • 12
  • 23
0

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.

VRUNDA JOSHI
  • 1
  • 5