Howto get html popup inside svg at correct position (using javascript)

Question

I have a simplr svg-graph and I'm trying to create a simple tooltip-popup for this graph, but I'm unable to find out how to set the position of the tooltip properly.

I have a .css where my popup-div is absolute:

#popup {
    position: relative

When creating nodes in the svg I hook a listener like:

    p.setAttributeNS(null,"onmousemove","parent.drawPopup(evt)");

Now to my problem, in the drawPopup callack, I cannot figure out how to set the coordinates correctly, I've tried something like the following in the drawPopu function:

pop = document.getElementById("popup"); 
pop.innerHTML = popupText;
pop.style.visibility='visible';
pop.style.left=evt.pageX + 'px';

but the pageX seem to be relative to the svg.graph, so I need to offset it somehow?

How does one usually do with problems like this? Any suggestions?

Answer 1

You might want to position the tooltip absolutely, your CSS rule states relative, and use the mouse x,y coordinates to place it on top of the graph since the tooltip is triggered by the mouse pointer anyways.

This link to quirksmode.org will have some helpful info, scroll down the page or search for mouse position and you'll find some tips on accurately calculating mouse x,y coordinates.

Answer 2

Take a look at Raphael.

http://raphaeljs.com/

Excellent vector javascript library.