Ändern des Titelattributs mit jQuery, während der Mauszeiger über dem Element steht

Ich habe eine div-Schaltfläche mit einem title-Attribut, das wir als Text für QuickInfos mit jQueryUI verwenden. Ich möchte den Tooltip der Schaltfläche ändern, indem ich darauf klicke. Wenn Sie jedoch auf die Schaltfläche klicken und die Rückruffunktion ausgelöst wird, befindet sich die Maus über dem Div und der Titel ist null.Ändern des Titelattributs mit jQuery, während der Mauszeiger über dem Element steht

Wie gehe ich vor, um dieses Verhalten zu beheben? Es sieht so aus, als ob das jQueryUI Tooltip-Widget den Titel beim Hover entfernt und wieder auf die Maus setzt.

$(document).tooltip(); 
$(".btn").click(function(){ 
    alert($(this).attr("title")); // Expect to see T1 or T2 but shows blank 
    if ($(this).attr("title")=="T1"){ 
     $(this).attr("title","T2") 
    }else{ 
     $(this).attr("title","T1") 
    } 
});

Live-: http://jsfiddle.net/lordloh/ckTjA/

Ohne die jQueryUI Tooltip-Widget an Ort und Stelle, scheinen die Dinge gut zu funktionieren: http://jsfiddle.net/lordloh/ckTjA/1/

Außerdem habe ich den Tooltip-Widget auf $(document) angewendet. Daher kann ich $(this).tooltip("option","content") nicht verwenden, da die QuickInfo nicht explizit auf $(this) angewendet wird. Dies führt zu einem Javascript-Fehler auf der Konsole.

2013-02-18: Ab jetzt bin ich $(document).tooltip("destroy"); ausgeführt, Titelattribute ändern und $(document).tooltip();. Keine elegante Lösung :-(ich nach etwas suchen, das nicht ein Hack ist

Quelle

2013-02-17 Lord Loh.

Das Widget entfernt den Text aus dem title Attribut der nativen Browser Tooltip angezeigt wird, wenn es entfernt den Text, es speichert sie in Daten an das Element angebracht zu verhindern

Sie können das gleiche tun, um diese Codezeile verwenden:..

$("#my-element").data("ui-tooltip-title", "My new tooltip message");

Wenn der Benutzer nun die Maus vom Element wegbewegt und dann zurückfährt, wird der neue Text angezeigt.

Um den neuen Text sofort anzuzeigen, müssen Sie das Live-Tooltip-Overlay-Element aktualisieren, das glücklicherweise leicht zu finden ist. Sie brauchen nur das zu tun, nachdem Sie den Text aktualisiert haben:

$(".ui-tooltip-content").html($("#my-element").data("ui-tooltip-title"));

_{Getestet auf jQuery UI 1.10.0.}

Quelle

2013-02-28 16:15:47 BG100

Danke. Warum kann ich nicht über '$ (this) .attr (" data-ui-tooltip-title ") auf' 'zugreifen? –

Ich sehe zwei Einträge in der Dokumentation - http: // api.jquery.com/jQuery.data/ und http://api.jquery.com/data/. Letzteres scheint das HTML5-Attribut 'data-*' zu verwenden. Ich nehme an, dass die '$ (" # my-element ") .data (" ui-tooltip-title ")' die Daten an anderer Stelle (?) Speichert. –

Ich denke, dass jQuery nur Informationen in der HTML5-Datei "data-xxx" speichert, wenn das Element über das Datenattribut verfügt. Ist dies nicht der Fall, wird es in einem internen Array oder ähnlichem gespeichert. – BG100

Wenn das Tooltip-Widget verwenden, können Sie die Inhalte über eine eigene API aktualisieren.

$(this).tooltip('option', 'content', "New Content Goes Here");

Quelle

2013-02-17 22:37:49 Pointy

Leider scheint dies nicht auf '$ zu arbeiten (this)', als ich den Tooltip 'document' gesetzt haben. –

@LordLoh. nun, vielleicht sollte man es anders machen :-) – Pointy

Ab sofort Ich führe '$ (Dokument) .tooltip (" destroy ");', Titelattribute ändern und '$ (Dokument) .tooltip();'. Keine elegante Lösung :-( –

Versuchen Sie folgendes:

 


            
 
    
             
  $('document').ready(function() { $('document').tooltip(); $(".btn").click(function(){ alert($(this).attr("title")); if ($(this).attr("title")=="T1"){ $(this).attr("title","T2"); }else{ $(this).attr("title","T1"); } }); });

$ ('Dokument') in einfachen oder doppelten Anführungszeichen sein sollte (‘oder„) und es funktioniert feine für mich whitout $ ('Dokument' ) .tooltip();

Quelle

2013-10-30 09:46:41 user2935683

Ändern des Titelattributs mit jQuery, während der Mauszeiger über dem Element steht

Antwort

Verwandte Themen