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!

Miscount

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.

Ovolo

Answer 2

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.

Truthful

Answer 3

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.

Distraction

This is incorrect; selecting by id (e.g $('#id1,#id2')) is much faster than selecting by class. To match $('.selectorClass') the entire DOM tree for the page is parsed, while to match the IDs, two lookups using the getElementById call are made. – Anachronous

I disagree with 'El Yobo' as this answer works perfectly for me. The question is not related to speed. Its related to what is the easiest. – Frequent

It is obvious that selecting by ID is much faster then selecting by css class. But this performance problem only related to the Internet Explorer's version until version 9. IE browsers starting with version 9 performs almost as good as Chrome, Firefox, Opera etc. since many years. Unfortunately the reproblem is still exists at large companies where they are using Internet Explore 8. I am already not talking about IE7 or IE6. So selecting by css class is very fast with modern browsers. – Rub

Answer 4

I've figured out how to have one tooltip div be shared by many tooltip images if anyone finds it handy

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

If you fail to put the .html() on there, you will see the shared tooltip show up once, and then when you activate it from another image, it will no longer work for the first one...

The tooltipBearing is a class set on some images in the page.

tooltipDiv is the ID of the div containing your tooltip content.

Brumbaugh