Événement déclencheur de JavaScript

Question

Laissez-moi essayer d'être aussi clair que possible, même si ce ne sera pas facile. OK, j'ai un cercle à l'intérieur de div, et je connais les coordonnées x et y du cercle à l'intérieur de ce div.

Comment créer une infobulle JavaScript ou HTML pour pointer à l'endroit où j'ai cliqué (dans ce cas le cercle)?

est ici l'image afin que vous puissiez mieux comprendre ce que je suis en train de faire:

Here is the picture

Maintenant, je sais que certains d'entre vous penseront: pourquoi ne pas simplement utiliser l'identifiant du cercle et obtenir le info-bulle pour pointer vers cette direction? Eh bien parce que le cercle est créé dynamiquement en tant qu'objet JavaScript et ne fait pas partie du code HTML. Parce que le dessin fait gagner du temps: où puis-je trouver un script d'info-bulle pointant du dessus? Quelque chose comme ça, voici une autre passe:

Screen shot

Answer 1

Si vous vous interrogez sur le positionnement de l'info-bulle, utilisez le style. Donnez l'élément parent position relative et l'enfant position absolue dans une feuille de style:

#canvas { 
    position: relative; 
} 
.tooltip { 
    position: absolute; 
} 

Lorsque vous créez l'info-bulle, donnez-lui la classe « infobulle » et définir ses propriétés style.left et style.top. Essayez quelque chose comme:

function click(evt) { 
    if (! tooltip) { 
     tooltip = document.createElement('div'); // or what-have-you 
     tooltip.className += ' tooltip'; 
    ... 
    tooltip.style.left = evt.offsetX + 'px'; 
    tooltip.style.left = evt.offsetY + 'px'; 

Answer 2

Obtenez le coordonnées x et y lorsque la souris est cliqué. Positionnez l'info-bulle [probablement sera une div] aux coordonnées x et y spécifiées.

Pour obtenir les coordonnées voir

event.clientX et event.clientY

Answer 3

Vous pouvez capturer la position de la souris: http://www.codelifter.com/main/javascript/capturemouseposition1.html