qTip点击显示​​/隐藏工具提示

Question

我有一个包含许多工具提示的页面。我想单独显示/隐藏每一个单击按钮。它不适合我，任何人都可以帮忙吗？

<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' 
     } 
    }); 
} 

谢谢

Answer 1

这showMyTT函数初始化你的提示。运行此功能适用于所有的IDS（初始化）后，你应该做这样的事情：

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); 
    } 
} 

编辑

这里是如何你可以初始化q提示（至少有一种可能性）。添加自定义类，你想有一个qtip所有div，例如qtiped：

HTML

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

，然后运行下面的代码：

的JavaScript

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

另外，在showMyTT里面做下面的cha nge：show: false为了避免自动加载（我们想初始化工具提示，不显示它们）。