Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DH-11923: Fix column tooltip when above the table #306

Merged
merged 5 commits into from
Nov 24, 2021
Merged

Conversation

dsmmcken
Copy link
Contributor

@dsmmcken dsmmcken commented Nov 19, 2021

When column tooltips are displayed above the table, instead of below (due to being to close to the bottom edge of the window) attempting to mouse into them was triggering them to close.

685c7c7f-549a-44a9-9433-06ceb60769fe

This was caused by IrisGridColumnTooltipMouseHandler triggering its own onLeave even when y < 0 that dismissed the tooltip.

This handler is actually unnecessary, as the popper has its on move handler on the window, that handles dismissing when the mouse moves outside the bounds of the popper OR the parent of the popper. And the parent in this case is a wrapper div that is temporarily created by iris gird, and is sized exactly to the column header.

image

Previously, this wrapper was used for positioning as well. However, this wrapper was being sized to the column width, which meant if the column was wider, and extended past the edge of the grid, the popper would be placed outside the grid as well. This change, restricts the wrapper, to be bounded by the grid.

image

However, this introduced a new problem, where the popper was now centered over the column space, rather than the label of the column. So additionally, we leverage a popper Reference Object, to act as the positioning guide for the popper, that is centered on the text. The wrapper is still the hover area, used for the mouse leave, the reference object is used just for positioning.

@dsmmcken dsmmcken added the bug Something isn't working label Nov 22, 2021
@dsmmcken dsmmcken marked this pull request as ready for review November 23, 2021 15:53
packages/iris-grid/src/IrisGrid.jsx Outdated Show resolved Hide resolved
mofojed
mofojed previously approved these changes Nov 23, 2021
@mofojed
Copy link
Member

mofojed commented Nov 23, 2021

You'll probably need to rebase so coverage tests don't fail

@dsmmcken dsmmcken merged commit 1a9f7fb into main Nov 24, 2021
@dsmmcken dsmmcken deleted the dmckenzie_DH-11923 branch November 24, 2021 14:30
dsmmcken added a commit that referenced this pull request Feb 2, 2022
- Resolves Grid column tooltips don't work when mouse enters from above #412
- tooltips now have onExited callback, irisgrid updates it's internal state now tooltip exit
- Caused by fix for pr #306, introduced this new edge case
- Remove this.isExiting from popper, doesn't appear to ever have been used
dsmmcken added a commit that referenced this pull request Feb 2, 2022
- Resolves Grid column tooltips don't work when mouse enters from above #412
- tooltips now have onExited callback, irisgrid updates it's internal state now tooltip exit
- Caused by fix for pr #306, introduced this new edge case
- Remove this.isExiting from popper, doesn't appear to ever have been used
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working web-client-ui
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants