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('destroy');

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('destroy');

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('destroy') // 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/

Destroy All Bootstrap Tooltips in A Div

Sign up