2

I am trying to perform a classic piece of popover functionality where, when a user moves the mouse over a <div>, the popover should appear with information. Overall, things are working as can be seen in the image below.

enter image description here

How I am currently doing this is by getting the coordinates of where the mouse currently is positioned and then using those as a guide for where to position the popover. i.e.

this.hoverPositionTop = event.clientY;
this.hoverPositionLeft = event.clientX;

This all works great.....except when a user scrolls the viewport up. This is because the coords are based on the mouse position on the screen, not the <div>. So what happens is when I go to display the popover it appears further up the scrolled page as its placing it on to the page based on the PAGE coordinates, not the coordinates.

enter image description here

So my question is - how do I get the correct coordinates of the mouse click such that the popover always displays at the mouse pointer regardless of whether the user scrolls the page or not?

2
  • 3
    Have you looked into MouseEvent.pageX and MouseEvent.pageY instead?
    – Mark Pond
    Commented Oct 7, 2021 at 21:15
  • Oh man. That absolutely solves my problem. I don't know how I couldn't figure that one out! Thank you sir! @MarkPond
    – Tom Ansley
    Commented Oct 7, 2021 at 21:35

1 Answer 1

2

This is all kudos to @MarkPond who provided the answer in the comments above.

Have you looked into MouseEvent.pageX and MouseEvent.pageY instead?

This resolved my question perfectly. See image below -

enter image description here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .