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?

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/

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