qTipp zeigen/verstecken Tooltip auf klicken

Question

Ich habe eine Seite mit vielen Tooltips. Ich möchte jeden beim Klicken auf eine Schaltfläche einzeln anzeigen/ausblenden. Es funktioniert nicht für mich, kann jemand helfen?

<span><input type="button" value="b1" onClick="showMyTT('div1');"></span><span><div id="div1"></div></span> 
<span><input type="button" value="b2" onClick="showMyTT('div2');"></span><span><div id="div2"></div></span> 
<span><input type="button" value="b3" onClick="showMyTT('div3');"></span><span><div id="div3"></div>​</span> 

function showMyTT(id) { 
    $('#'+id).qtip({ 
     content: { 
      text: 'Show the content', 
      title: false 
     }, 
     position: { 
      my: 'left center', 
      at: 'left center' 
     }, 
     show: { 
      event: false, 
      ready: true 
     }, 
     hide: false, 
     style: { 
      classes: 'ui-tooltip-shadow ui-tooltip-jtools' 
     } 
    }); 
} 

Danke

Answer 1

Diese showMyTT Funktion Ihre Tooltips initialisiert. Nach dem Ausführen dieser Funktion für alle IDs (Initialisierung) sollten Sie etwas tun:

HTML

<input type="button" value="b1" onClick="toggleQtip('div1');" /> 

JavaScript

function toggleQtip(id) { 
    var div = $('#'+id); 
    if (div.data('visible')) { 
     div.qtip('hide'); 
     div.data('visible', false); 
    } else {  
     div.qtip('show'); 
     div.data('visible', true); 
    } 
} 

EDIT

Hier ist, wie Sie können q initialisieren Tipp (mindestens eine Möglichkeit). Fügen Sie benutzerdefinierte Klasse für alle divs Sie möchten einen qtip haben, zum Beispiel qtiped:

HTML

<div id="div1" class="qtiped">TEST</div> 
<input type="button" value="b1" onClick="toggleQtip('div1');" /> 

und dann den folgenden Code ausführen:

JavaScript

$(document).ready(function() { 
    $('.qtiped').each(function() { 
     showMyTT($(this).attr('id')); 
    }); 
}); 

Auch innerhalb showMyTT tun Sie das folgende cha nge: show: false um das automatische Laden zu vermeiden (wir wollen Tooltips initialisieren, nicht anzeigen).