tooltip positioning for placement left and right #7654
Description
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
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):
Problem when body has position (tooltip is not in the expected place):
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