jQuery qTip : 하나의 툴팁 div를 여러 타겟 div에 연결하는 방법은 무엇입니까?

Question

jQuery qTip 플러그인의 일반적인 동작은 할당 된 모든 툴팁 항목에 대해 새로운 숨겨진 div를 만드는 것입니다. DOM을 복잡하게하는 것을 피하기 위해 숨겨진 툴팁 요소 하나를 여러 대상에 묶는 방법이 있습니까?

인위적인 예 :

<div id="foo1"></div> 
<div id="foo2"></div> 

<script> $("#foo1,#foo2").qTip({"content":"test"}); </script> 

<!-- Creates two elements, rather than one: --> 
<div class="qtip" style="display:none;">test</div> 
<div class="qtip" style="display:none;">test</div> 

qTip 사람이 단 하나의 도구 설명 컨테이너를 사용하여 풍부한 HTML을 지원하는 다른 jQuery를 기반 툴팁 플러그인을 추천 할 수 있습니다이를 수행 할 수없는 경우,? 감사!

Answer 1

qTip 상자를 동적으로 구성 할 수 있습니다.

HTML :

<a id="some-link" href="#">Show a qTip</a> 
<div id="hidden-element" style="display:none"></div> 

자바 스크립트 : 2011년 6월 22일 (justgrumpy) - As of beta3 the qtip does not prerender by default :

$('#some-link').click(function() { 
    $('#hidden-element').qtip({ 
     content: { 
      text: '<div>Insert content here</div>', 
      prerender: true //as of beta3, this option is false by default 
     }, 
     // etc, etc 
    }); 

    qtip = jQuery('#hidden-element').qtip('api'); 
    qtip.show(); 

    return false; 
}); 

을 편집 qTip API에 대한 자세한 내용은 http://craigsworks.com/projects/qtip/docs/api를 참조하십시오. qtip이 동적으로 표시 되려면 content 옵션에서 'prerender'를 'true'로 설정해야합니다.

Answer 2

나는 jQuery Tools Tooltip의 팬입니다. HTML에서 자신의 툴팁 구조를 정의 할 수 있으며 원하는만큼 많은 요소에 툴팁을 적용 할 수 있습니다.

Answer 3

쉼표로 구분 된 요소 목록 대신에 클래스 선택기를 사용하십시오. 다음은 그 예입니다.

테스트 해 보았지만 정상적으로 작동합니다.

Answer 4

나는 사람이

$(".tooltipBearing").qtip({ 
          content: { 
           text: $("#tooltipDiv").html() 
          }   
         }); 

당신이 들이게된다 (넣어하지 않을 경우) 거기에 편리하게, 당신은 것입니다 발견하면 하나의 툴팁 DIV 많은 툴팁 이미지를 공유 할 수있는 방법을 알아 냈어요 한 번 표시되는 공유 툴팁을보고 다른 이미지에서 활성화하면 더 이상 첫 번째 이미지가 표시되지 않습니다.

툴팁 베어은 페이지의 일부 이미지에 설정된 클래스입니다.

tooltipDiv은 툴팁 콘텐츠가 포함 된 div의 ID입니다.