ersetzen Tooltip (Bootstrap) Text durch Klicken auf

Question

Ich versuche, den Text eines Bootstrap-Tooltip-Schaltfläche zu ändern, wenn die tatsächliche Schaltfläche angeklickt wird und dann nach der Maus nicht über die Schaltfläche dynamisch den Standardtext der QuickInfo zurück. Ich habe Probleme mit jQuery-Code. Kann mir jemand erklären, wie die Dinge funktionieren? Meine Idee ist, zuerst zu überprüfen, ob die Schaltfläche angeklickt ist und dann, wenn es angezeigt wird (die Standard-QuickInfo ändern), wenn die Maus nicht mehr über die Schaltfläche ist oder die Schaltfläche nicht angeklickt wird, um die Tooltip-Meldung anzuzeigen, aber ich kann nicht Leg die Dinge in meinen Kopf, wie es strukturiert sein wird. Jeder Rat ist mehr als willkommen.

Hier ist mein Code bis jetzt.

$(function() { 
 
\t var $toolTip = $('#tooltip-example'); 
 
\t $toolTip.tooltip(); 
 

 
\t $toolTip.click(function(){ 
 
\t \t $myToolTip.attr('title', 'New Hello World Message').tooltip('fixTitle').tooltip('show'); 
 
\t }); 
 

 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<button type="button" class="btn btn-default" id="tooltip-example" data-tooltip title="Hello world">Click me</button> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

wie unten Versuchen.

Das einzige Problem, das ich in Ihrem Beispiel zu sehen ist, dass $ myToolTip nicht definiert ist, Sie $ toolTip gemeint ist.

Ein weiteres Problem in SO Snippet war die Position der Taste auf der Bildschirmoberseite, dies führte dazu, dass die Tooltip nicht richtig angezeigt wurde, ich änderte die Tooltip Richtung nach unten, um es zu beheben.

$(function() { 
 
    var $toolTip = $('#tooltip-example'); 
 
    var originalTitle = $toolTip.attr('title'); 
 
    $toolTip.tooltip({placement: "bottom"}); 
 

 
    $toolTip.click(function() { 
 
    $toolTip.attr('title', 'New Hello World Message').tooltip('fixTitle').tooltip('show'); 
 
    }); 
 
    
 
    $(document).on("mouseout","#tooltip-example",function() 
 
    { 
 
    $toolTip.attr('title',originalTitle).tooltip('fixTitle').tooltip('show'); 
 
    }); 
 

 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<button type="button" class="btn btn-default" id="tooltip-example" data-tooltip title="Hello world">Click me</button>