Question

I’ve looked around a bit, but can’t seem to find the answer I’m looking for.

What I want to do:
I have a div that has content in it, including other elements. It is to remain hidden on the page, but I want to use it as the tooltip of three different elements without duplicating the toolip div.

So, for example, I have a div and 3 images:

<div id='tooltip_div'>This is <b>a tooltip</b> to be used for the three images</div>
<img src='1.jpg' />
<img src='2.jpg' />
<img src='3.jpg' />

I want to attach a tooltip to each of those images with the content of the #tooltip_div div. I’ve looked at this but it seems that is expects the tooltip to come immediately after the target element. This would require duplicating the tooltip div for however many target elements I want to associate it with (so, I would have to have that div three times, once after each image).

It would be great if I could sort of do $('img').tooltip('#tooltip_div'), basically tell the plugin which element to use for the tooltip.

If anyone can help, that would be great! Thanks!

Answer 1

There is another tooltip plugin that I’ve used that does support this.

jQuery Tools Tooltip

Notice the tip option which you can specify a single tooltip element.