Bootstrap tooltip not working in chrome

Question

Bootstrap Tooltip not working in chrome, but working fine in firefox.

<script type='text/javascript'>
 jQuery(document).ready(function () {
 if ($("[rel=tooltip]").length) {
 jQuery("[rel=tooltip]").tooltip({
placement: 'right',
trigger: "hover"
});
 }
});
</script>

And also the placement is not working correctly in firefox, even after defining as right, its showing only on top.

Contra

looks fine jsfiddle.net/arunpjohny/4HptX/2 – Brutify

can you update the jsfiddle to recreate the case... also the versions of jQuery and bootstrap used – Brutify

Bootstrap version - v2.2.1, jQuery - v1.6.3 – Contra

Is it something with versions? Not working correctly in chrome? However i loaded it with new version of Bootstrap 3.0 and Jquery 2.0 using CDN, but also not working in chrome. – Contra

Answer 1

You need to update your jQuery to at least 1.7 because it looks like bootstrap 2.2.1 is using .on().

Look at your browser console, it is throwing an error

Uncaught TypeError: Object [object Object] has no method 'on'

Brutify

Is showing error as 'Uncaught TypeError: Object [object Object] has no method 'styleSwitcher'' – Contra

But i am indirectly calling it from CDN, so that should fix the issue right? jQuery 2.0 – Contra

can you share the links... the cdn links will give the versions – Brutify

@user2695925 jquery 2.0.0 and bootstrap 2.2.1 seems fine jsfiddle.net/arunpjohny/4HptX/3 – Brutify

can you also share the bootstrap link – Brutify

//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js – Contra

Are you testing in chrome? Because its working fine in firefox – Contra

@user2695925 also can you check whether this sample is working for you jsfiddle.net/arunpjohny/4HptX/4 – Brutify

Should i define bootstrap.css link also? Its showing Bootstrap v2.3.2 – Contra

@user2695925 did you check the link I posted above – Brutify

Answer 2

Quite an old question but I've been coming across this issue today where none of these answers applied to my problem. My problem was, that I've been using a tooltip on a disabled button, which is not possible according to the documentation of Bootstrap: https://getbootstrap.com/docs/4.3/components/tooltips/#disabled-elements

To handle that case, a wrapper element must be used, where the tooltip is applied to. For instance:

<span data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Also important is to use the style="pointer-events: none;" attribute on the disabled button. Otherwise it won't be working in Chrome neither. (Firefox seems to deal with it without the wrapper too.)

Counteraccusation