Ich habe einen Tooltip für ein Ankerelement, der beim Klicken eine AJAX-Anfrage sendet. Dieses Element verfügt über einen Tooltip (von Twitter Bootstrap). Ich möchte, dass sich der Tooltip-Inhalt ändert, wenn die AJAX-Anforderung erfolgreich zurückgegeben wird. Wie kann ich den Tooltip nach der Initiierung bearbeiten?
jquery
twitter-bootstrap
tooltip
Rebellion
quelle
quelle
$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');
$(element).attr('data-original-title', newValue).tooltip('show');
war die einfachste Arbeitslösung für mich.In Bootstrap 3 ist es ausreichend aufzurufen,
elt.attr('data-original-title', "Foo")
da Änderungen am"data-original-title"
Attribut bereits Änderungen in der Tooltip-Anzeige auslösen.UPDATE: Sie können .tooltip ('show') hinzufügen, um die Änderungen sofort anzuzeigen. Sie müssen kein Mouseout und Mouseover-Ziel verwenden, um die Änderung im Titel zu sehen
quelle
.tooltip('show');
, damit sie nach dem Update angezeigt wirdSie können den Tooltip-Text aktualisieren, ohne tatsächlich show / hide aufzurufen:
quelle
.tooltip('show')
am Ende der Kette, hat bei mir funktioniert.setContent
undshow
macht den Trick! Sie könnendata-original-title
direkt ändern, anstatt zu verwendenfixTitle
Hier ist eine gute Lösung, wenn Sie den Text ändern möchten, ohne den Tooltip zu schließen und erneut zu öffnen.
Auf diese Weise wird Text ersetzt, ohne den Tooltip zu schließen (wird nicht neu positioniert, aber wenn Sie eine Änderung von einem Wort usw. vornehmen, sollte dies in Ordnung sein). und wenn Sie mit dem Mauszeiger über + zurück in der QuickInfo fahren, wird diese weiterhin aktualisiert.
** Dies ist Bootstrap 3, für 2 müssen Sie wahrscheinlich Daten- / Klassennamen ändern
quelle
$tip
ist kein Attribut von$(element)
$(element).attr('title', newTitle).tooltip('fixTitle').parent().find('.tooltip .tooltip-inner').text(newTitle);
für Bootstrap 4:
quelle
Dies funktioniert, wenn der Tooltip instanziiert wurde (möglicherweise mit Javascript):
quelle
$('#tooltip_id').data('bs.tooltip').options.title = 'New_value!';
Für Bootstrap 3.x.
Dies scheint die sauberste Lösung zu sein:
Mit Show wird der Titel sofort aktualisiert und nicht darauf gewartet, dass der Tooltip ausgeblendet und erneut angezeigt wird.
quelle
Hier ist das Update für Bootstrap 4 :
Aber der beste Weg ist, dies so zu machen:
oder inline:
Auf der UX-Seite sehen Sie nur, dass der Text ohne Überblendung oder Ausblenden / Einblenden von Effekten geändert wird und keine Notwendigkeit für die
_fixTitle
.quelle
Sie können das einfach
data-original-title
mit folgendem Code ändern :quelle
Bootstrap 4
https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose
quelle
Das Folgende hat für mich am besten funktioniert. Im Grunde verschrotte ich jeden vorhandenen Tooltip und mache mir nicht die Mühe, den neuen Tooltip anzuzeigen. Wenn Sie show in der QuickInfo wie in anderen Antworten aufrufen, wird es angezeigt, auch wenn der Cursor nicht darüber schwebt.
Der Grund, warum ich mich für diese Lösung entschieden habe, ist, dass die anderen Lösungen, die den vorhandenen Tooltip wiederverwendeten, zu einigen seltsamen Problemen führten, bei denen der Tooltip manchmal nicht angezeigt wurde, wenn Sie den Cursor über das Element bewegen.
quelle
data('bs.tooltip')
anstelle vondata('tooltip')
In Bootstrap 4 verwende ich einfach
$(el).tooltip('dispose');
und erstelle es wie gewohnt neu. Sie können die Disposition also vor eine Funktion stellen, die einen Tooltip erstellt, um sicherzustellen, dass sie sich nicht verdoppelt.Den Status überprüfen und mit Werten basteln zu müssen, scheint weniger freundlich zu sein.
quelle
Sie können den Inhalt eines Tooltip-Aufrufs mit einer Funktion festlegen
Sie müssen nicht nur den Titel des aufgerufenen Elements verwenden.
quelle
Dank dieses Codes war sehr hilfreich für mich, ich fand es effektiv bei meinen Projekten
$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');
quelle
Zerstören Sie bereits vorhandene Tooltips, damit wir sie mit neuen Tooltip-Inhalten neu füllen können
quelle
Ich konnte keine der Antworten zum Laufen bringen. Hier ist eine Problemumgehung:
quelle
Ich denke, Mehmet Duran hat fast recht, aber es gab einige Probleme bei der Verwendung mehrerer Klassen mit demselben Tooltip und deren Platzierung. Der folgende Code vermeidet auch js-Fehler, die prüfen, ob es eine Klasse namens "tooltip_class" gibt. Hoffe das hilft.
quelle
Ändern Sie den Text, indem Sie den Text im Element direkt ändern. (aktualisiert die Tooltip-Position nicht).
Ändern Sie den Text, indem Sie den alten Tooltip zerstören und dann einen neuen erstellen und anzeigen. (Bewirkt, dass der alte ausgeblendet und der neue ausgeblendet wird)
Ich verwende die Top-Methode, um das "Speichern" zu animieren. Nachricht (mit
 
damit ändert sich der Tooltip nicht in der Größe) und um den Text in "Fertig" zu ändern. (plus Auffüllen), wenn die Anforderung abgeschlossen ist.quelle
Das hat bei mir funktioniert: (Bootstrap 3.3.6; jquery = 1.11.3)
Mit dem Attribut kann
data-html="true"
HTML für den Tooltip-Titel verwendet werden.quelle
Mit Tooltip-Objekt Boostrap:
quelle
Für BS4 (und BS3 mit geringfügigen Änderungen). Nach stundenlangem Suchen und Testen habe ich die zuverlässigste Lösung für dieses Problem gefunden und es löst sogar das Problem, mehrere (Tooltip oder Popover) gleichzeitig zu öffnen. und das Problem des automatischen Öffnens nach Fokusverlust usw.
quelle
Ich habe dies nur in Bootstrap 4 getestet , ohne .show () aufzurufen.
quelle
Mit diesem Code können Sie den Tooltip ausblenden, seinen Titel ändern und den Tooltip erneut anzeigen, wenn die Ajax-Anforderung erfolgreich zurückgegeben wird.
quelle
Ich benutze diesen einfachen Ausweg:
quelle
Nützlich, wenn Sie den Text eines Tooltips ändern müssen, nachdem er mit attr 'data-original-title' initialisiert wurde.
quelle