wake-up-neo.net

jQuery Tools Tooltip - Titel ändern

Ich habe ein Problem mit dem Tooltip für das Jquery-Plugin-Tool (http://flowplayer.org/tools/tooltip/index.html)Ich muss den Titel des Elements ändern.

   reloadTooltip();
   $("#example").attr('title', obj.text);
   reloadTooltip();

   function reloadTooltip(){
       $("[title]").tooltip({ position: "bottom right", opacity: 1 });
   }

HTML-Teil:

   <span title="text" id="example"></span>

Mit meiner Lösung bekam ich endlich 2 Titel übereinander. Das ungestylte (ignorierte js) ist das neue. Der Titel der Tools-QuickInfo wurde noch nicht geändert.

danke dir

15
smo

Ich mache gleich das Gleiche. Ich habe den Code des Tooltip-Plugins durchgesehen und als schnelle und einfache Möglichkeit gefunden, den Tooltip zu aktualisieren. Das Plugin entfernt das title-Attribut und legt diesen Inhalt in einer Elementeigenschaft namens tooltipText ab. In jQuery 1.6+ kann es wie folgt manipuliert werden:

// get the current tooltip content
$('#someElement').prop('tooltipText')

// set the tooltip content
$('#someElement').prop('tooltipText', 'w00t');

Das Plugin setzt die tooltipText -Eigenschaft (beachten Sie die Großschreibung) in Zeile 55 in Version 1.3. Änderungen, die auf diese Weise vorgenommen werden, sind, soweit ich das beurteilen kann, sofort wirksam.

Bei der direkten Elementmanipulation lautet der Tooltip-Inhalt:

var e = document.getElementById('#someElement');
alert(e.tooltipText);
e.tooltipText = 'w00t';
19
Marty Vance

habe es bekommen! entsprechend der kürzlich erschienenen Version von Tooltip (ab v2.3.1) https://github.com/Twitter/bootstrap/blob/master/js/bootstrap-tooltip.js#L272 .__ Sie müssen das Attribut (nicht die Eigenschaft) 'data-original-title' setzen, da dieses Tooltip derzeit verwendet wird.

Es ist ein Hack, aber ich hoffe, es funktioniert für Sie, da es für mich funktioniert hat.

$('#example').attr('data-original-title','the new text you want'); //and that's it.
16
alexserver

Ich weiß nicht, ob Sie immer noch nach der Antwort suchen, aber ich habe gerade ein paar Stunden damit verbracht, dasselbe zu sortieren, und habe die Antwort (so einfach wie immer, sobald Sie sie finden!) In der API gefunden Dokumentation.

Was auch immer das Element ist, auf das Sie den Tooltip gesetzt haben, rufen Sie die Tooltip-API ab und legen Sie den neuen Wert fest. wenn Sie den Tooltip auf ein Element mit der ID "myTip" setzen

$('#myTip').data('tooltip').getTip().html("New string!") ;

Et voila.

Sie sollten den Titel nicht entfernen müssen (und sowieso nicht, da Tooltips faul initialisiert werden). Verwenden Sie stattdessen die cancelDefault-Konfiguration:

http://flowplayer.org/tools/tooltip/index.html

8
Chris

Alle anderen Optionen funktionierten bei der letzten Version von Tooltipster (3.3.0) nicht .__ Ich fand diesen Befehl als funktionierend:

$('#selectorElement').tooltipster('content', 'new title');
4
Roy Shmuli

Wie wäre es damit?

   initTooltip();
   updateTooltip(obj.text);


   function initTooltip(){
       $("[title]").tooltip({ position: "bottom right", opacity: 1 });
   }

   function updateTooltip(text){
       $("[title]").attr('title', text);
       $("[title]").data('title',text);
       $("[title]").removeAttr("title");   
    }

Ich weiß nicht, ob es der beste Ansatz ist, aber ich denke, es könnte für Sie funktionieren.


Ist das Objekt korrekt? Was kommt in obj.text?

2
Rui Lima

Für mich hat sich nichts getan, als den Tooltip neu zu initialisieren:

        //Save the current configuration.
        var conf = trigger.data('tooltip').getConf();
        trigger.removeData('tooltip').unbind();
        //Add the changed text.
        var newText = 'Hello World!';
        trigger.attr("title", newText);
        //Reapply the configuration.
        trigger.tooltip(conf);

Die vorherigen Antworten zu getTip () erfordern, dass der Tooltip mindestens einmal angezeigt wird. Andernfalls liefert getTip () eine Null.

Die Verwendung von OnBeforeShow hat fast für mich funktioniert, aber ich konnte nicht herausfinden, wie ich das Ereignis lösen kann, damit es nicht jedes Mal ausgeführt wird, wenn ich es zeigte.

Das Ändern des Titels funktionierte aus irgendeinem Grund nicht für mich, möglicherweise aufgrund der Tatsache, dass ich ein benutzerdefiniertes Layout verwendete.

1
John

Eine andere Lösung zum dynamischen Ändern des Titels besteht in der Verwendung des onBeforeShow-Ereignisses:

jQuery('#myselector').tooltip({onBeforeShow: tooltipBeforeShow});

...

function tooltipBeforeShow() {
  // On production you evaluate a condition to show the apropiate text
  var text = 'My new text for the <b>tooltip</b>';
  this.getTip().html(text);
}

this bezieht sich auf das Tooltip-Objekt der Ereignisfunktion

1
Ismaelj

Bester Tooltip für mich! Dieser Tooltip wie bei Google Mail

enter image description here

auf kopfseite:

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script>
<link rel="stylesheet" type="text/css" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css">

In HTML:

<a class="example" href="#" original-title="Hello World">Hover over me</a>

<br/>

<a class="example" href="#" original-title="Hello World">Hover over me</a>

<br/>

<a class="example" href="#" original-title="Hello World">Hover over me</a>

Auf Javascript-Codes:

$(function() {
    $('.example').tipsy();
});

Demo besuchen jsfiddle

0
mghhgm

Alle oben genannten Funktionen funktionieren nicht mit der neuesten Version von Tooltipster. Die korrekte Vorgehensweise lautet:

$('#help').data($('#help').data('tooltipsterNs')[0]).Content="new content";
0
Rabih Kodeih

Versuchen Sie, den Titelwert zu ändern, indem Sie die data ("title") - Methode von jQuery aufrufen. 

0
Marco Schmid

Verwenden Sie dies: $ (Selektor) .attr ("Daten-Original-Titel", "Ihr Tooltip-Text!");

0
Avinash

Ich habe auch damit zu kämpfen. Und dieser Code hat für mich funktioniert:

$('.yourelement').attr('tooltipText', newToolTip);

Bitte beachten Sie die Großschreibung T. Kleinbuchstaben T funktionieren nicht.

0
live-love

Das hat für mich funktioniert:

$ ('# yourID'). attr ('data-original-title', 'New Message'). tooltip ('show'). tooltip ('hide');

0
FD gi