Zerstöre alle Bootstrap Tooltips in einer Div

Question

Ich habe eine $("#settings") div mit mehreren Bootstrap-Tooltips, die an die Kindelemente angehängt sind.

Zum Beispiel

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

Ich möchte $("#settings").tooltip('destroy') tun, um loszuwerden, alle diese Tooltips auf einen Knopf drücken, aber es funktioniert nicht, ich gehe davon aus, weil die Tooltips nicht tatsächlich auf die Einstellungen div, aber drinnen.

Allerdings habe ich auch versucht $('#settings').find('*').tooltip('destroy') und das hat auch nicht funktioniert.

Ist es wegen, wie ich sie initialisiere?

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

Was ist eine schnelle und einfache Möglichkeit, auf alle Tooltips innerhalb eines div zuzugreifen?

Answer 1

Sie initialisiert alle Elemente, die data-toggle="tooltip" Attribut mit dem Elemente Behälter (der Körper) trough Delegation (fiddle) haben:

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

so zu deaktivieren, um es Sie verwenden zerstören müssen, es zu tun auf dem Körper:

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

Wenn Sie es ohne Delegation tun wollen Sie jedes der Elemente initialisieren (012.):

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

und zerstören:

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

Wenn Sie noch Trog initialisieren möchten Delegation und stoppen sie von der Arbeit mit disable (fiddle):

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

Erklärung über den Unterschied zwischen zerstören und deaktivieren von 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 

Dies ist die Antwort, die ich in Stiefel bekam github - Da Sie verwenden Delegation (d die selector-Option), ich glaube, es gibt nur eine aktuelle Tooltip-Instanz (im Body). Daher hat der Versuch, nicht vorhandene Tooltip-Instanzen auf den Triggerelementen selbst zu zerstören, keine Auswirkung. Vergleichen Sie die nicht-delegierte Version: http://jsfiddle.net/zsb9h3g5/1/

Answer 2

Um nur Tooltips innerhalb #settings zu zerstören, dies zu tun:

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

Answer 3

Die gewählte Antwort zerstört die Tooltips, so dass sie vollständig verschwunden sind und ihre Funktionalität ist deaktiviert.

Wenn Sie alle Tooltips gleichzeitig entfernen und gleichzeitig ihre Funktionalität beibehalten möchten, verwenden Sie $('.tooltip').remove();.

Answer 4

Ab Bootstrap Version 4 und gemäß der Dokumentation sollten Sie dispose verwenden, da destroy nicht mehr definiert ist. Beispiel ist unten angegeben:

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