influxdata / influxdata/giraffe
Page Scroll leads to misplaced datapoint tooltip/popups
- Dominant language
- TypeScript
- Stars
- 189
- Forks
- 33
- Avg merge
- 3d 15h
- Merged PRs (30d)
- 4
Description
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.
Contributor guide
Research direction
Start with the linked giraffe-test reproduction and reproduce the tooltip behavior after scrolling the page. Review the behavior noted in PR #280, then verify that datapoint tooltips remain next to the pointer and visible in the viewport after scrolling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100