jQuery qTip: How to attach a single tooltip div to multiple target divs?

Question

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 1

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.

Answer 2

Instead of doing comma separated element lists use the class selector. Here's an example:

$('.selectorClass').qTip({arguments:here});

I've not tested this, but it should work fine.

Answer 3

You can construct qTip boxes dynamically.

Html:

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

Javascript:

$('#some-link').click(function() {
    $('#hidden-element').qtip({
        content: {
            text: '<div>Insert content here</div>'
        },
        // etc, etc
    });

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

    return false;
});

See http://craigsworks.com/projects/qtip/docs/api for details on the qTip API