q 클릭시 툴팁 보이기/숨기기

Question

많은 툴팁이있는 페이지가 있습니다. 나는 버튼 하나를 클릭 할 때마다 seperatly 모든 것을 보이고 숨기고 싶다. 그것은 나를 위해, 아무도 도울 수 없습니까?

<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 기능이 툴팁을 초기화 감사드립니다. 모든 ID에 대한 (초기화)이 기능을 실행 한 후 다음과 같이해야합니다 :

HTML

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

자바 스크립트

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를 초기화 할 수 있습니다. 팁 (적어도 하나의 가능성).

HTML

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

을하고 다음 코드를 실행합니다 : 예를 qtiped를 들어, 당신은 qtip을 가지고 싶은 모든 div의 사용자 정의 클래스를 추가

자바 스크립트

을

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

또한 showMyTT 내부에는 다음과 같은 문자가 사용됩니다. 자동 로딩을 피하기 위해 nge : show: false을 사용합니다 (툴팁을 표시하고 표시하지 않으려합니다).