Geek Answers Handbook

JQuery qTip: How to connect one hint div to multiple target divs?

The normal behavior for the jQuery qTip plugin is to create a new hidden div for each hint item assigned. Is there a way to associate one hidden tooltip element with multiple targets in order to avoid cluttering the DOM?

Proprietary 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 cannot do this, can anyone recommend another jQuery-based tooltip plugin that supports rich HTML using only one tooltip container? Thanks!

+7
jquery tooltip qtip
source share
4 answers

You can dynamically create qTip boxes.

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; });

Read more about qTip API

see http://craigsworks.com/projects/qtip/docs/api .

EDIT: June 22, 2011 (justgrumpy) - Since beta3, qtip is not a prerender by default . "prerender" must be set to "true" in the content option so qtip is displayed dynamically.

+1
source share

I am a fan of jQuery Tools Tooltip . This allows you to define your own hint structure in HTML, and you can apply this hint to as many elements as possible.

+2
source share

Instead of lists of items separated by commas, use the class selector. Here is an example:

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

I have not tested this, but it should work fine.

+1
source share

I figured out how to split a single div tooltip with different tooltip images if anyone finds it convenient

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

If you do not post .html () , you will see that a general tooltip will appear once, and then when you activate it from another image, it will no longer work for the first ...

tooltipBearing is a collection of classes on some images on a page.

tooltipDiv is a div identifier containing the contents of your tooltip.

+1
source share

More articles:


All Articles