Destroy All Bootstrap Tooltips in A Div

Question

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

For example,

Answer 1

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

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

Answer 3

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

Answer 5

To only destroy tooltips inside #settings, do this:

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