50

According the documentation is is possible to turn off the functionality just doing $('body').off('.alert.data-api').
In the case of tooltip I tried the following from js console $('body').off('.tooltip.data-api') but it does not disable the tooltip on bottons.
Any hints how to precede?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Lorraine Bernard
  • 13,000
  • 23
  • 82
  • 134
  • try excluding the "bootstrap-tooltip.js" file from your page. Also, since it doesnt do what the documentation says it should, raise an issue here: https://github.com/twitter/bootstrap/issues/new – robasta Nov 16 '12 at 10:13

5 Answers5

114

You can't disable tooltips that way because it has no event listener on the body. Instead, you can disable the tooltips themselves using the code below.

$('[rel=tooltip]').tooltip()          // Init tooltips
$('[rel=tooltip]').tooltip('disable') // Disable tooltips
$('[rel=tooltip]').tooltip('enable')  // (Re-)enable tooltips
$('[rel=tooltip]').tooltip('destroy') // Hide and destroy tooltips

Edit: For Bootstrap 4, the 'destroy' command has been replaced by the 'dispose' command, so:

$('[rel=tooltip]').tooltip('dispose') // Hide and destroy tooltips in Bootstrap 4
Okomikeruko
  • 1,123
  • 10
  • 22
Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82
  • 1
    How can I disable the tooltip for a single element and at the same time enable the default browser hover tooltip? – Roar Skullestad Jul 08 '13 at 15:16
  • 6
    `$('#my-element').tooltip('disable').attr('title', $('#my-element').attr('data-original-title'));` – Arnold Daniels Jul 09 '13 at 10:07
  • Jasny, is there also a way to do the same for a group of thumbnail elements? I have tried replacing #my-element with .my-class but this obviously does not work; it applies the first title of the group to all elements in the group. – PlayGod Feb 17 '14 at 23:05
  • Thank you for your rapid response! I found I could ask fancybox API to use a different attribute... that way I get tooltip on thumbnail + caption on expanded image: http://jsfiddle.net/vkDcG/ – PlayGod Feb 17 '14 at 23:39
  • @MikeFlynn, you are probably using the wrong selector. Please look at my answer here: http://stackoverflow.com/questions/28220597/destroy-all-bootstrap-tooltips-in-a-div/28220763#28220763 – Technotronic Apr 24 '16 at 10:31
  • This is great. Why isn't this documented on the Bootstrap site? – Skitterm Jun 10 '16 at 22:28
  • 5
    for Bootstrap 4, use tooltip('dispose') instead of tooltip('destroy') – devonj Jun 13 '17 at 23:51
9

Can you try:

$('a[rel=tooltip]').tooltip();
$('a[rel=tooltip]').off('.tooltip');

Don't forget to change the selector. Works fine for me... http://jsfiddle.net/D9JTZ/

James Gentes
  • 7,528
  • 7
  • 44
  • 64
Caio Tarifa
  • 5,973
  • 11
  • 46
  • 73
  • 4
    Don't unbind the event. The Tooltip object still exists, which makes it impossible to re-enable the tooltip. You need to either disable it or destroy it completely. – Arnold Daniels Nov 16 '12 at 10:26
  • Note that you need to precede that line with $('a[rel=tooltip]').tooltip(); – James Gentes Nov 10 '15 at 23:22
4

To permanently disable a tooltip:

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

To stop the tooltip from being displayed on hover but have the ability to re-enable it:

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

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

Sebastian Smolorz
  • 497
  • 7
  • 20
  • 1
    This did what I wanted (replacing `destroy` with `dispose` for bootstrap 4). I was hiding/showing parent elements based on a child element which had a tooltip, so the tooltip would end up still being visible, even if the parent element was hidden. calling `tooltip('dispose')` and then `.tooltip({placement: "top"})` right after fixed the broken on-hover, but made sure that the tooltip was still enabled. – Sean Breckenridge Jun 18 '20 at 23:51
0

I found a way to do it using CSS! Just add .tooltip { visibility: hidden } to your CSS file.

If you want to make your link accessibility friendly without the tooltip, then just add aria-label= "Here's a link description."

Hope this helps!

Calum Childs
  • 337
  • 2
  • 12
-3

I struggled too with this, but I came up with a solution! In my case I use Jquery Sortable which is ofcourse annoying when you have tooltips flying around!

So I made a variable

var sort = '0`;

And since almost every tooltip has an init() function, I created

if(window.sort!='1') { // So I'm not sorting
  init.tooltip();
}

So, this can be the easiest enable/disable function!

Germ Knol
  • 1
  • 1