Zerstöre Alle Bootstrap Tooltips in Ein Div
Ich habe eine $("#settings")
div mit mehreren bootstrap tooltips angebracht, um die child-Elemente.
Beispielsweise
<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>
Will ich tun $("#settings").tooltip('destroy')
um loszuwerden, alle diese tooltips auf eine Taste drücken, aber es funktioniert nicht, ich gehe davon aus, da die tooltips sind nicht eigentlich auf die Einstellungen div, aber innen.
Aber ich habe auch versucht $('#settings').find('*').tooltip('destroy')
- und das hat nicht funktioniert entweder.
Ist es, weil, wie ich bin initialisieren?
$(document).ready(function() {
$("body").tooltip({ selector: '[data-toggle=tooltip]' });
});
Was ist eine schnelle und einfache Möglichkeit für den Zugriff auf alle tooltips innerhalb eines div?
InformationsquelleAutor LSD | 2015-01-29
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sie initialisiert alle Elemente, die
data-toggle="tooltip"
Attribut mit den Elementen Behälter (den Körper) Trog delegation (fiddle):so, in Reihenfolge zu deaktivieren, verwenden Sie zerstören müssen, um es zu tun auf den Körper:
Wenn Sie wollen, es zu tun ohne delegation können Sie initialisieren jedes der Elemente (fiddle):
und es zu zerstören:
Wenn Sie immer noch wollen, um zu initialisieren Trog delegation und es zu stoppen von der Arbeit verwenden deaktivieren (fiddle):
Erklärung über den Unterschied zwischen zerstören und deaktivieren entnommen Jasny Antwort:
Dies ist die Antwort, die ich bekam in Stiefelriemen github - Da bist du mit delegation (d.h. der Selektor-option), ich glaube, es gibt nur eine tatsächliche tooltip-Instanz (auf den Körper). Also, versuchen zu zerstören, nicht vorhandenen tooltip-Instanzen auf die trigger-Elemente selbst keine Wirkung hat.
Vergleichen Sie die nicht-Delegierten version: http://jsfiddle.net/zsb9h3g5/1/
InformationsquelleAutor Technotronic
Als die bootstrap-version 4 und gemäß der Dokumentation, die Sie verwenden sollten entsorgen als
destroy
ist nicht mehr definiert. Beispiel ist unten angegeben:InformationsquelleAutor msoliman
Die gewählte Antwort zerstört die tooltips, so sind Sie vollständig verschwunden sind und Ihre Funktionalität ist deaktiviert.
Wenn Sie wollen einfach nur, um loszuwerden, alle tooltips auf einmal, während die Aufrechterhaltung der Funktionalität, verwenden Sie
$('.tooltip').remove();
.InformationsquelleAutor kjdion84
Nur zerstören tooltips innerhalb
#settings
:Nach dem Bootstrap docs sollte.
Ich aktualisierte die Antwort mit meinen Ergebnissen. Werfen Sie einen Blick!
Versucht, mit dieser (und nicht in meiner Lösung) und den tooltip würde nicht wieder Feuer ? Obwohl meine situation ist wahrscheinlich einzigartig ?
InformationsquelleAutor isherwood
Hatte ich eine situation, in Bootstrap 3 mit tooltips auf ein <select> wo
$('body').tooltip('destroy')
würde nicht auf tooltips initialisiert über$('[data-toggle="tooltip"]').tooltip({container:'body'})
.Endete mit
onchange="$('.tooltip').remove()"
entfernen Sie alle tooltips. Diese Methode funktioniert, in denen die BS-Methoden nicht. Hoffe es hilft jemandem mit einer ähnlichen situation ?Hinweise
Meine
opacity:0
<select> gestellt wurde über einen BS-Taste zu nutzen OS dropdowns statt eines traditionellen BS dropdown-Menü. Die Schaltfläche wird nicht erhalten, hover, aufgrund der überlagerung, so dass der tooltip wurde Hinzugefügt, um die unsichtbare <select>Habe ich auch noch
this.blur()
auf das onchange-Ereignis. Ansonsten ist die <select> behält den Fokus der Verhinderung der tooltip von feuern auf sich wiederholende schwebt ?onclick="$('.tooltip').remove();" onchange="this.blur()"
InformationsquelleAutor Mavelo