4

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).

mikl
  • 23,749
  • 20
  • 68
  • 89
  • Is this browser specific?. I just checked your example in chrome (linux) and it is working fine. – TigrisC Feb 20 '11 at 02:58
  • The tips get placed in (0,0) in both Firefox and Safari on my Mac, but yes, it seems to work fine in Chrome. – mikl Feb 20 '11 at 17:52

2 Answers2

2

Maybe try using gRaphaël for those tips.

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

rsp
  • 107,747
  • 29
  • 201
  • 177
  • Yeah, I thought about doing it with gRaphaël, but I'd prefer to use the same library for tooltips in HTML and SVG if possible. – mikl Feb 20 '11 at 17:54
0

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?

Chasbeen
  • 1,448
  • 12
  • 17
  • The tip is not placed in the Raphaël code, but in the Tipsy library, so getBBox() is not an option there, since it is for all kinds of DOM nodes. – mikl Feb 20 '11 at 17:55