Zerstöre alle Bootstrap-Tooltips in A Div

Lesezeit: 4 Minuten

Benutzer-Avatar
LSD

Ich habe ein $("#settings") div mit mehreren Bootstrap-Tooltips, die an die untergeordneten Elemente 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 will das tun $("#settings").tooltip('destroy') all diese Tooltips auf Knopfdruck loszuwerden, aber es funktioniert nicht, ich nehme an, weil die Tooltips nicht funktionieren tatsächlich an die Einstellungen div, aber darin.

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

Liegt es daran, wie ich sie initialisiere?

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

Wie kann ich schnell und einfach auf alle QuickInfos in einem Div zugreifen?

Benutzer-Avatar
Technotronik

Sie haben alle Elemente initialisiert, die haben data-toggle="tooltip" Attribut mit dem Elementcontainer (dem Körper) durch Delegation (Geige):

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

Um es also mit dem Zerstören zu deaktivieren, müssen Sie es auf dem Körper tun:

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

Wenn Sie es tun möchten ohne Delegation Sie können jedes der Elemente initialisieren (Geige):

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

und vernichte es:

$('[data-toggle="tooltip"]').tooltip('dispose'); // used in v4
$('[data-toggle="tooltip"]').tooltip('destroy'); // used in v3 and older

Wenn Sie trotzdem durch initialisieren möchten Delegation und verhindern Sie, dass es funktioniert deaktivieren (Geige):

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

Erklärung zum Unterschied zwischen zerstören und deaktivieren aus Jasnys Antwort:

$('[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

Dies ist die Antwort, die ich in Bootstraps erhalten habe github – Da Sie die Delegation verwenden (dh die Auswahloption), gibt es meines Erachtens nur eine tatsächliche Tooltip-Instanz (im Körper). Daher hat der Versuch, nicht vorhandene Tooltip-Instanzen auf den Auslöserelementen selbst zu zerstören, keine Wirkung. Vergleichen Sie die nicht delegierte Version: http://jsfiddle.net/zsb9h3g5/1/

  • seltsam, dass ‘zerstören’ nicht funktioniert … das sagen ihre docs … danke! 🙂

    – LSD

    29. Januar 2015 um 17:42 Uhr

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

Wenn Sie einfach alle Tooltips auf einmal loswerden und ihre Funktionalität beibehalten möchten, verwenden Sie $('.tooltip').remove();.

Ab Bootstrap-Version 4 und laut Dokumentation sollten Sie verwenden entsorgen wie destroy ist nicht mehr definiert. Beispiel ist unten angegeben:

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

Ich hatte eine Situation in Bootstrap 3 mit Tooltips auf einem wurde über einer BS-Schaltfläche platziert, um Betriebssystem-Dropdowns anstelle eines herkömmlichen BS-Dropdowns zu verwenden. Die Schaltfläche erhält aufgrund des Overlays keinen Hover, daher wurde der Tooltip zum unsichtbaren den Fokus bei und verhindert, dass der Tooltip bei wiederholten Hovern ausgelöst wird 👍

Um nur Tooltips im Inneren zu zerstören #settingsmach das:

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

  • Ich habe versucht, dies (anstelle meiner Lösung) zu verwenden, und der Tooltip wurde nicht erneut ausgelöst 🤔 Obwohl meine Situation wahrscheinlich einzigartig ist 😏

    – Mavelo

    28. September 2018 um 13:42 Uhr

  • Ich habe versucht, dies (anstelle meiner Lösung) zu verwenden, und der Tooltip wurde nicht erneut ausgelöst 🤔 Obwohl meine Situation wahrscheinlich einzigartig ist 😏

    – Mavelo

    28. September 2018 um 13:42 Uhr

1158010cookie-checkZerstöre alle Bootstrap-Tooltips in A Div

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy