REFACTOR: mv tooltip container out of scroll area #1406
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
stephanwlee
force-pushed
the
explore
branch
4 times, most recently
from
142c80f to
6d7c78b
Compare
stephanwlee
force-pushed
the
explore
branch
from
f803c71 to
160ba6e
Compare
nfelt
approved these changes
Sep 21, 2018
Contributor
nfelt
left a comment
nfelt
left a comment
There was a problem hiding this comment.
Cool! Thanks for figuring this out and also getting rid of the inner html stuff while you were at it.
stephanwlee
force-pushed
the
explore
branch
from
160ba6e to
aec8721
Compare
Chart tooltip (or all popovers) should render at the body level in order to prevent clipping from a scrollable area. To be more specific, even position:fixed can get contained inside a region if it is within a scrollable region. As a remedy, most tools render popover in children of body. To achieve this in a component structure, there are two competing goals: 1. intuitive component structure (tooltip is a subcomponent chart) 2. DOM-wise, tooltip should not be nested in chart but should be at body level. Libraries like React allows such pattern via "tunneling". By manually creating an element in the body, we emulated the behavior. In this commit, we: - introduced vz-chart-tooltip that knows how to position - applied the new tooltip to scalar-card - introduced new positioning, "auto"
stephanwlee
force-pushed
the
explore
branch
from
aec8721 to
9eec174
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Chart tooltip (or all popovers) should render at the body level in order
to prevent clipping from a scrollable area. To be more specific, even
position:fixed can get contained inside a region if it is within a
scrollable region. As a remedy, most tools render popover in children of
body.
To achieve this in a component structure, there are two competing goals:
level.
Libraries like React allows such pattern via "tunneling". By manually creating
an element in the body, we emulated the behavior.
In this commit, we: