S2 tooltip doesn't position itself correctly when place near the bottom of the screen
#8,027 opened on 2025年4月2日
Repository metrics
- Stars
- (15,634 stars)
- PR merge metrics
- (PR metrics pending)
説明
To reproduce:
- Go to https://react-spectrum.adobe.com/s2/index.html?path=/docs/tooltip--docs and set a left/right placement for the tooltip
- Set the page height such that the trigger button for the tooltip is at the bottom of the page
- Open the tooltip and note the misplacement of the arrow.
This seems to be due to a combination of the margin applied to the tooltip making calculatePosition think the tooltip is much larger than it is and thus causing some issues when calculating the overlay position. Will need to dig into https://github.com/adobe/react-spectrum/blob/4ad04f00f251fe9c4ffb5f746662bdd33aed35cb/packages/%40react-aria/overlays/src/calculatePosition.ts#L411
Additionally, I'm not sure if the margin of the overlay should actually be considered as part of the tooltip.
Other problematic area:
arrowMinPosition doesn't take into account the margin, depends on the answer to the question above
arrowMaxPosition should either not subtract overlayMargin (if we don't want to consider the margin as part of the tooltip's actual size) OR should be adding the portion of the overlay margin that matters (aka marginBottom if we are placing the tooltip to the right of the button). At the moment, it subtracts overlayMargin which is just completely wrong since that is both top+bottom/right+left margin when we only need either bottom/left since position: 0 of the arrow already compensates for margin top/left