influxdata/giraffe

Tooltip position affected by scroll

iamrekas opened this issue · 3 comments

The tooltip position offset is somehow affected by the scroll.

Expectation is that tooltip all the time must be in correct position.

Screen.Recording.2021-09-22.at.15.01.58.mp4

Thank you

I have been experiencing the same. I have several graphs (10+) on the same page. When scrolling so that the first Graph is barely hidden, the tooltip stops working on all other graphs.

@TCL735 This Issue has been residing for a couple months without any attention. Could you please have it classified?

Been boiling it down to what I believe is wrong.
This should be using e.offsetX and e.offsetY. But this method seems to be used by some other component causing this change to break.

setState({x: e.pageX - left, y: e.pageY - top})

document.getElementsByClassName("giraffe-plot")[4].getBoundingClientRect()
bottom: 648.765625
height: 159.1875
left: 55
right: 400
top: 489.578125
width: 345
x: 55
y: 489.578125

document.getElementsByClassName("giraffe-plot")[4].addEventListener("mouseenter",(e) => console.log(e));
offsetX: 344
offsetY: 15
pageX: 399
pageY: 847
returnValue: true
screenX: 480
screenY: 608
shiftKey: false
type: "mouseenter"
which: 0
x: 399
y: 504

By taking the y from the mousenter event and subtracting the top/y from the bounding client rect 504-489=15 which is equal to the offsetY.