How to get html popup inside svg at correct position (using javascript)
I have a simpler svg-graph and I am trying to create a simple tooltip-popup for this graph, but I cannot find out how to set the position of the tooltip.
I have a .css where my popup-div is absolute:
#popup {
position: relative
When creating nodes in svg, I connect a listener, for example:
p.setAttributeNS(null,"onmousemove","parent.drawPopup(evt)");
Now, to my problem, in the drawuppupup callack, I cannot figure out how to set the coordinates correctly, I 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 pageX seems to be relative to svg.graph, so I need to compensate for it somehow?
How is it usually with such problems? Any suggestions?
a source to share
You might want to fully position the tooltip, your CSS rule will refer to words, and use the x, y coordinates of the mouse to position them over the graph, as the tooltip is always triggered by the mouse pointer.
This quirksmode.org link will contain some useful information, scroll down the page or find the mouse position and you will find some tips for calculating the x, y coordinates of the mouse accurately.
a source to share