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

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>',
            prerender: true  //as of beta3, this option is false by default
        },
        // 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

EDIT: June 22, 2011 (justgrumpy) – As of beta3 the qtip does not prerender by default. ‘prerender’ must be set to ‘true’ in the content option for the qtip to display dynamically.