I am using the jQuery Tooltip plugin and am having difficulty getting the tooltips to display adjacent to (offset from) the element that triggers it.

Link to the plugin:
http://docs.jquery.com/Plugins/Tooltip

Link to my demo page:
http://www.edgehillproductions.com/test/tooltip_demo/

I'm using the bodyHandler argument to return a unique ID for a DIV that contains the markup for that tooltip's contents.

To keep my document clean, i am placing all of the DIV containers for the tooltips grouped together at the bottom of the document.

As you can see in the demo page, the tooltips are working: each triggering element does display its appropriate tooltip.

However the issue is that based upon where in the document i've located the tooltip containers, THATS where they're displaying when triggered.

How can i get each tooltip container to display adjacent to (offset from) the element that triggered it?

Thanks for reading

It may be required to have a title attribute in the element. Try adding one dynamically using:

$("#tt_link").attr("title", "").tooltip({. . .});

Change the positioning of the messages to the mouse pointer X & Y co-ordinates.

"Change the positioning of the messages to the mouse pointer X & Y co-ordinates."

I am not clear just how to do this. I've poured over the jquery.tooltip.js file, as well as the documentation for the plugin, but cannot locate anything regarding position of the mouse pointer coordinates.

That is, based on the documentation for the .tooltip () plugin, adding "track: true" should achieve a tooltip that tracks with the mouse/cursor coordinates.

I've posted the same question to the jQuery Forums, thinking that would generate response from those who've had the same issue, but have yet to receive a response.

Thanks again fro reading. Any assistance appreciated.

Did my advice of adding a title attribute not work?

@mgraphic: Thanks for your suggestion. And apologies, for not responding directly, but no: applying your suggestion didnt work either.

I bumped the companion post in the jQuery Forum and got an answer that seems to work

THIS ISSUE IS RESOLVED

I have updated my DEMO page. I am not quite sure i understand, but will try to explain.

The issue was that in my CSS, i was missing:
#tooltip { position: absolute; z-index: 3000; }

When i add this, BANG: my tooltips track with mouse cursor. Whats confusing is that in my markup, there is no instance of a container with id="tooltip".

I think whats happening is that when the .tooltip () is called, its generating the container with id="tooltip" into which its displaying (via bodyHandler argument) the contents of another div. See Line #40 within jquery.tooltip.js.

Thanks for all y'all's attention and help on this. Happy Friday.