Comment obtenir html popup à l'intérieur svg à la position correcte (en utilisant javascript)

Question

J'ai un svg-graphique simplr et j'essaye de créer un tooltip-popup simple pour ce graphique, mais je suis incapable de savoir comment définissez correctement la position de l'info-bulle.

J'ai un Css où mon pop-up-div est absolue:

#popup { 
    position: relative 

Lors de la création des noeuds dans le svg je brancher un écouteur comme:

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

Maintenant à mon problème, dans la drawPopup callack, je ne peux pas comprendre comment pour définir correctement les coordonnées, j'ai essayé quelque chose comme la suivante dans la fonction drawPopu:

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

mais le pageX semble être relatif au svg.graph, donc j'ai besoin de le compenser en quelque sorte?

Comment fait-on habituellement avec des problèmes comme celui-ci? Aucune suggestion?

Answer 1

Vous pouvez positionner l'info-bulle absolument, votre règle CSS indique relatif, et utilisez la souris coordonnées x, y pour le placer au-dessus du graphique depuis l'info-bulle est déclenchée par le pointeur de la souris de toute façon.

Ce lien vers quirksmode.org aura quelques informations utiles, faites défiler la page ou recherchez position de la souris et vous trouverez quelques conseils sur le calcul avec précision la souris coordonnées x, y.

Answer 2

Jetez un coup d'œil à Raphael.

http://raphaeljs.com/

vecteur excellente bibliothèque javascript.