-
-
Notifications
You must be signed in to change notification settings - Fork 2k
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
Autoposition for tooltip #2381
base: dev
Are you sure you want to change the base?
Autoposition for tooltip #2381
Conversation
1bf0250
to
a834e5a
Compare
* Query selector for container in which tooltip should be visible. | ||
* If not set the tooltip`s parent element will be used. | ||
*/ | ||
auto_direction_container: PropTypes.string, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I imagine a common ask would be just to make sure the tooltip doesn't go off the screen viewport (which typically won't change mid-hover) - is there a way we could allow that?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In fact I guess there are three flavors you might want: just keep it on screen, just keep it in the specified container, or keep it in the intersection of the screen and the specified container.
Not sure what API would be best for this... maybe in addition to query selectors, auto_direction_container
could accept either 'screen'
or 'screen,<selector>'
- the latter kind of looks like a selector for both "screen" and your container.
Also maybe 'window'
is better than 'screen'
?
const hiddenDirections = [ | ||
{ | ||
direction: 'left', | ||
value: getRealHiddenPart(parentRect.left - tooltipRect.left), | ||
}, | ||
{ | ||
direction: 'right', | ||
value: getRealHiddenPart(tooltipRect.right - parentRect.right), | ||
}, | ||
{ | ||
direction: 'top', | ||
value: getRealHiddenPart(parentRect.top - tooltipRect.top), | ||
}, | ||
{ | ||
direction: 'bottom', | ||
value: getRealHiddenPart( | ||
tooltipRect.bottom - parentRect.bottom | ||
), | ||
}, | ||
]; | ||
|
||
return hiddenDirections.reduce((sum, hidden) => sum + hidden.value, 0); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This one doesn't use direction
, right? So could just be an array of 4 numbers, then
return sum(hiddenDirections); // import {sum} from 'ramda'
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
also we might want to normalize by the tooltip size in each direction, ie instead of
tooltipRect.bottom - parentRect.bottom
use
(tooltipRect.bottom - parentRect.bottom) / tooltipRect.height
Otherwise for example a short but wide tooltip might wind up on top or bottom even if it's mostly cut off and could be mostly visible on the left or right, where more pixels are cut off but that's a smaller fraction of its total area.
@nickmelnikov82 really nice solution! Aside from my comments above, we should just add a test and a changelog entry. |
Add the "auto" option for the direction props to close #2358 issue.