adobe/react-spectrum

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

Open

#8027 aperta il 2 apr 2025

Vedi su GitHub
 (0 commenti) (1 reazione) (0 assegnatari)TypeScript (1500 fork)auto 404
bughelp wanted

Metriche repository

Star
 (15.634 star)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

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

Guida contributor