Turn the Tooltip Bootstrap functionality off

Question

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?

Deckard

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: github.com/twitter/bootstrap/issues/new – Vertigo

Answer 1

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 

Organogenesis

How can I disable the tooltip for a single element and at the same time enable the default browser hover tooltip? – Dying

$('#my-element').tooltip('disable').attr('title', $('#my-element').attr('data-original-title')); – Organogenesis

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. – Segal

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: jsfiddle.net/vkDcG – Segal

@MikeFlynn, you are probably using the wrong selector. Please look at my answer here: #28221097 – Mousseline

This is great. Why isn't this documented on the Bootstrap site? – Emilemile

for Bootstrap 4, use tooltip('dispose') instead of tooltip('destroy') – Blastula

Answer 2

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/

Essonite

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. – Organogenesis

Note that you need to precede that line with $('a[rel=tooltip]').tooltip(); – Doodlesack

Answer 3

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

Edieedification

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. – Momism

Answer 4

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!

Kennel

this will also hide the text of the <div>, and may not be what you are looking for – Assiut

It worked for me. @JeffXiao Why should it hide the text of the div? – Tristich

Answer 5

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!

Sixtyfourmo