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


Tags: javascript,html,css,svg,tooltip

Problem :

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?



Solution :

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.


    CSS Howto..

    How to add css on elements created through ajax (jquery)?

    How i can set the height of black overlay in css that all other things goes hidden?

    CSS Shadows (how to get rid of top shadow?)

    How to apply CSS on Unordered List written by JSP tag on web Page

    CSS exit box how to? [closed]

    Overlapping image in photoshop splice, how to float with CSS

    How do I apply css to second level menu items?

    How to align floated elements to the bottom of their container

    How do I make circles within a larger circle, and text within the center of all the circles, in CSS?

    How to pull css attributes from

    How to get an image's height and set its parent height to auto?

    How to center text inside div in this specific situation? [duplicate]

    how can i create true loop?

    How to hide a column in a DataGrid?

    How to minify css files with RequireJS

    How to scroll beyond fixed position elements on a page with TOC without using JS?

    CSS how to align elements inside a div with 2 columns

    css: how to remove pseudo elements (after, before, …)

    How to change the color of header?

    HTML to PDF (by javascript) how can I add css or table?

    How to align radio buttons inside a DIV?

    how to change browsers default scrollbar using css or jquery

    How to reserve 'width' for a 'hide' element

    How to make all divs same height, based on text content?

    How to align a button inside a DIV

    How to float Dojo DropDownMenu over a table cell

    How to center smaller text with bigger css

    How do I filter unwanted CS styles from CS sheet?

    How to make comment shape using css

    How can we create custom style for Jquery-ui dialog window in PHP?