adobe/react-spectrum

S2 tooltip doesn't position itself correctly when place near the bottom of the screen

Open

#8,027 opened on Apr 2, 2025

View on GitHub
 (0 comments) (1 reaction) (0 assignees)TypeScript (1,500 forks)auto 404
bughelp wanted

Repository metrics

Stars
 (15,634 stars)
PR merge metrics
 (PR metrics pending)

Description

To reproduce:

  1. Go to https://react-spectrum.adobe.com/s2/index.html?path=/docs/tooltip--docs and set a left/right placement for the tooltip
  2. Set the page height such that the trigger button for the tooltip is at the bottom of the page
  3. 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

Contributor guide