Fixing position of Tipsy tooltips on Raphaël path

Question

This is a very specific and somewhat complex issue, so I have set up a minimal test case that you should probably see before reading the rest of this.

I have page that displays images with highlighted areas on hover via Raphaël. I have also been working on adding Tipsy tooltips to these hover, so you can see what each part of the image is called.

Raphaël draws the highlighted areas with SVG, and since SVG elements are also DOM-nodes, attaching Tipsy to them is easily accomplished like this:

// Get the path node as a jQuery object.
pathNode = $(path.node);

// Set the title so it's available to tipsy.
pathNode.attr('title', element.title);

// Add a Tipsy tooltip to each node, if Tipsy is loaded.
if ($.fn.tipsy) {
  pathNode.tipsy({
    fade: true
  });
}

The problem only fly in the ointment, and the reason for this question is that Tipsy draws the tooltip at the top of the screen (at coordinates 0,0) instead of next to the SVG node, and I can't figure out how to fix it. When debugging the Tipsy JavaScript it seems to have the coordinates at some point, but still fails to draw in the right spot.

Can anyone figure it out? (See the minimal test case for details).

Answer 1

Your demo is also showing tooltips at 0,0 on the iPhone. As the pieces go red you can identify min x and min y by using getBBox() Place tip accordingly?

Answer 2

Maybe try using gRaphaël for those tips.

See this example I just wrote: http://jsfiddle.net/3tHmp/