Autoposition for tooltip#2381
Conversation
nickmelnikov82
force-pushed
the
autoposition-for-tooltip
branch
from
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.
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.
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.
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.
also we might want to normalize by the tooltip size in each direction, ie instead of
tooltipRect.bottom - parentRect.bottomuse
(tooltipRect.bottom - parentRect.bottom) / tooltipRect.heightOtherwise 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. |
3 participants
Add the "auto" option for the direction props to close #2358 issue.