react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

tooltip positioning for placement left and right

Open artola opened this issue 10 months ago โ€ข 6 comments

Provide a general summary of the issue here

Positioning of the tooltip is wrong, only for placement left/right, when the page's body has position: relative and it has scrolled.

Note: the positioning for top/bottom using the same mentioned style works without problem.

๐Ÿค” Expected Behavior?

Positioning with placement left/right is correct as it happens already with top/bottom.

๐Ÿ˜ฏ Current Behavior

Tooltip is off by some amount, even far from the anchor element (might be even not on viewport).

๐Ÿ’ Possible Solution

No response

๐Ÿ”ฆ Context

No response

๐Ÿ–ฅ๏ธ Steps to Reproduce

This sandbox shows the problem when body has position: relative. Just scroll until the "yellow" is not visible in the viewport and hover the buttons. The first has placement="top" and the positioning is OK, while the second has placement="right" and it FAILS. The tooltip is shown far from the anchor.

https://codesandbox.io/p/sandbox/upbeat-tristan-7rgqjc

Image


For example, in the current docs shows such behavior, just add to the body the following style position: relative.

https://react-spectrum.adobe.com/react-aria/Tooltip.html#placement

No problem if body has not position (tooltip is the correct place): Image

Problem when body has position (tooltip is not in the expected place): Image


It is also reproducible using the example: https://react-spectrum.adobe.com/react-spectrum/Tooltip.html#placement

Version

latest

What browsers are you seeing the problem on?

Chrome, Safari

If other, please specify.

No response

What operating system are you using?

Mac OS

๐Ÿงข Your Company/Team

No response

๐Ÿ•ท Tracking Issue

No response

artola avatar Jan 23 '25 09:01 artola