jQuery qTip: How to attach a single tooltip div to multiple target divs?
The normal behavior for the jQuery qTip plugin is to create a new hidden div for every tooltip item assigned. Is there a way to tie a single hidden tooltip element to multiple targets, to avoid cluttering the DOM?
Contrived Example:
<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>
If qTip is unable to do this, can anyone recommend another jQuery-based tooltip plugin which supports rich HTML using only a single tooltip container? Thanks!
Answer
I'm a fan of the jQuery Tools Tooltip. It allows you to define your own tooltip structure in the HTML, and you can apply that tooltip to as many elements as you want.