Destroy All Bootstrap Tooltips in A Div

问题:

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?

回答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/

回答2:

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')

回答3:

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();.

回答4:

To only destroy tooltips inside #settings, do this:

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

回答5:

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