Destroy All Bootstrap Tooltips in A Div

Question

I have a $("#settings") div with multiple bootstrap tooltips attached to the child elements.

For example,

<div id="settings" style="display: flex;">
  <tbody>
    <tr>
      <td width="25%" class="left Special" style="font-size:150%">Content:</td>
      <td width="5%"></td>
      <td width="70%" class="Special settingswrong" style="font-size:200%"><div style="display:inline" data-toggle="tooltip" data-placement="right" title="" data-original-title="This is not what you are looking for!">Content</div></td>
    </tr>
    <tr>
      <td width="25%" class="left Special" style="font-size:150%">Content:</td>
      <td width="5%"></td>
      <td width="70%" class="Special settingswrong" style="font-size:200%"><div style="display:inline" data-toggle="tooltip" data-placement="right" title="" data-original-title="This is not what you are looking for!">Content</div></td>
    </tr>
  </tbody>
</div>

I want to do $("#settings").tooltip('destroy') to get rid of all these tooltips on a button press, but it doesn't work, I'm assuming because the tooltips aren't actually on the settings div, but inside it.

However I also tried $('#settings').find('*').tooltip('destroy') and that didn't work either.

Is it because of how I am initializing them?

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

What is a fast and easy way to access all the tooltips within a div?

Cantonese

function resetTooltip(){ $(".tooltip").remove(); $("[title]").tooltip(); } – Groomsman

Answer 1

You initialized all of the elements which have data-toggle="tooltip" attribute using the elements container (the body) trough delegation (fiddle):

$("body").tooltip({ selector: '[data-toggle=tooltip]' });

so in order to disable it using destroy you need to do it on the body:

$('body').tooltip('dispose');

If you want to do it without delegation you can initialize each of the elements (fiddle):

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

and destroy it:

$('[data-toggle="tooltip"]').tooltip('dispose'); // used in v4
$('[data-toggle="tooltip"]').tooltip('destroy'); // used in v3 and older

If you still want to initialize trough delegation and stop it from working using disable (fiddle):

$('body').tooltip({ selector: '[data-toggle=tooltip]' });
$('body [data-toggle="tooltip"]').tooltip('disable');

Explanation about difference between destroy and disable taken from Jasny's answer:

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

This is the answer I got in Bootstraps github - Since you're using delegation (i.e. the selector option), I believe there's only one actual tooltip instance (on the body). Thus, trying to destroy nonexistent tooltip instances on the trigger elements themselves has no effect. Compare the non-delegated version: http://jsfiddle.net/zsb9h3g5/1/

Revet

odd that 'destroy' doesn't work... that is what their docs say to do... thank you! :) – Cantonese

Answer 2

The chosen answer destroys the tooltips so they are gone completely and their functionality is disabled.

If you simply want to get rid of all tooltips at once while maintaining their functionality, use $('.tooltip').remove();.

Recite

Answer 3

As of bootstrap version 4 and according to documentation, you should use dispose as destroy is no longer defined. Example is given below:

$('#element').tooltip('dispose')

Rogovy

Answer 4

I had a situation in Bootstrap 3 with tooltips on a <select> where $('body').tooltip('destroy') would not work on tooltips initialized via $('[data-toggle="tooltip"]').tooltip({container:'body'}).

Ended up using onchange="$('.tooltip').remove()" to remove all tooltips. This method works where BS methods would not. Hope it helps someones with a similar situation 😉

Notes

My opacity:0 <select> was placed over a BS button to utilize OS dropdowns instead of a traditional BS dropdown. The button does not receive hover due to the overlay, so the tooltip was added to the invisible <select>

I also added this.blur() to the onchange event. Otherwise the <select> keeps focus preventing the tooltip from firing on repetitive hovers 👍

Above

Actually had to change it up a bit since onchange never fired if the same <option> was chosen. Updated to onclick="$('.tooltip').remove();" onchange="this.blur()" – Above

Answer 5

To only destroy tooltips inside #settings, do this:

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

Mendymene

Tried using this (instead of my solution) and the tooltip would not fire again 🤔 Though my situation is likely unique 😏 – Above