jQuery qTip: How to attach a single tooltip div to

问题:

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!

回答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.

回答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.

回答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.

回答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.