Page Scroll leads to misplaced datapoint tooltip/popups

[karel-rehor]

Detected in PR #280 but it appears to apply generally

Use Case

Learning Giraffe with React, plots created to the same page are stacked on top of each other. This might also be a layout for a mobile device. There is a need to scroll down the page from one plot to the next. Then hover on datapoints to view the tooltip/popup.

I've saved a project illustrating this here. https://github.com/karel-rehor/giraffe-test

Expected Behavoir

That whenever a datapoint in a plot is hovered the tooltip/popup will appear next to the pointer in the plot.

Observed Behavior

As the page is scrolled the datapoint tooltip/popups are no longer aligned with the pointer location, and may even disappear all together, appearing at the very bottom of the page, which may be below the viewport frame.

Screencast

Note

I was not sure about the importance of this issue, since I've yet to come across a production React application that uses scrolling of the entire page and I assumed that most React applications would limit the layout to the viewport dimensions. But after discussions with Vlada, it was decided that this issue could be raised.

[T0-B1]

Not sure if can help but i found out that wrapping the whole page content in a <div style="overflow-y: auto; height: 100vh;"></div> might be a workaround