Création d'une fenêtre contextuelle sur la position du clic

Question

J'ai un élément de toile sur mon site sur lequel l'utilisateur peut sélectionner plusieurs choses. Pour avoir plus de choix sur ce qu'il faut faire avec l'élément sélectionné, je veux créer une petite fenêtre contextuelle avec quelques options. Malheureusement, je ne suis pas en mesure de placer le popup à la même position que le clic.

Ma première approche est de faire le popup avec une div. J'ai un Div :

    <div id = "popup" style="visibility: hidden">
    text
    </div>

Pour modifier le statut et la position de la div, j'utilise ce code :

    $(popupDiv).offset({ top: mousePos.y, left:  mousePos.x});

Malheureusement, la position de la div n'est pas la même que celle qu'elle devrait avoir.

Une idée de la raison ?

Answer 1

Assurez-vous que votre #popup div est position: absolute , pas relative . Sinon, son décalage sera relatif à l'endroit où l'élément du bloc aurait été dessiné.

Voici un violon de base : jsFiddle

éditer : J'aurais dû mentionner - si vous ne le précisez pas absolute vous-même, lors de l'utilisation de l'outil .offset() il utilisera automatiquement la méthode relative .