of something that works now. (In Firefox. See below for caveats.) Note that as you mouse over the nodes, the node label becomes visible as well as a grey-backgrounded "This is a tooltip" message at the top. (Ignore the fact that the latter starts visible for now.) The tooltip message is from the HTML, not SVG.
Each node corresponds to a group (<g>) in the SVG file; the page sets onmouseover and onmouseout events on that group node. They set the style.visibility flag of both SVG elements and the HTML-based tooltip.
However, if I try to change the location of the tooltip by using style.pageX and style.pageY, as the mouse moves the tooltip and node label flicker a lot, and when the mouse stops they are usually not visible even if the cursor is over a node. Here is a demo
The only change between them is the addition of the
- Code: Select all
label.style.top=e.pageY + 'px';
label.style.left=e.pageX + 'px';
I put an alert in onmouseout and saw it was firing a lot in both
versions when the cursor is not leaving the element. I discovered that the events were being fired for both the text and ellipse and that was causing the problem, so I tried just putting the event on the ellipse. This works rather better, but if the user mouses over the text then that triggers the mouseout event for the ellipse and so basically the same problem persists.
First, how can I fix this? Second, what can I do to get this to work in other browsers? It doesn't work at all in Chrome or IE.Edit
: Hah, figured out the problem again: the tooltip pops up under the mouse -- so then the mouseout event fires and kills it, then it pops back up, etc. I offset the popup again and it worked.
Still, my second question applies as well as any "wtf why did you do that" comments.