You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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 hasplacement="top"
and the positioning is OK, while the second hasplacement="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 styleposition: relative
.https://react-spectrum.adobe.com/react-aria/Tooltip.html#placement
No problem if body has not position (tooltip is the correct place):
![Image](https://private-user-images.githubusercontent.com/11500763/405959318-6af1bfbe-13e8-44c0-a1a5-8cc75be9187c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5NjQwMTAsIm5iZiI6MTczODk2MzcxMCwicGF0aCI6Ii8xMTUwMDc2My80MDU5NTkzMTgtNmFmMWJmYmUtMTNlOC00NGMwLWExYTUtOGNjNzViZTkxODdjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA3VDIxMjgzMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRiZjNkZTgzZjhiMTQxYWYxOTM4N2YxZjBiZTRkOWY4YTM5ZWZjZThiOGM5Mzk3MDFkMmZmMDYwMWJhNThlYmMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.eFQkciQPPcjpQys5ymLvrUL-n4X7TYhVV1g3NMH-Svw)
Problem when body has position (tooltip is not in the expected place):
![Image](https://private-user-images.githubusercontent.com/11500763/405959236-7ffe272c-829c-415b-a32e-524c0cf22961.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5NjQwMTAsIm5iZiI6MTczODk2MzcxMCwicGF0aCI6Ii8xMTUwMDc2My80MDU5NTkyMzYtN2ZmZTI3MmMtODI5Yy00MTViLWEzMmUtNTI0YzBjZjIyOTYxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA3VDIxMjgzMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA0MDg0YjU0MTJjMWEzNzc5Yjk1NGQxM2IzMTk0NzBkY2JiNmQ2YTY4YmE3OGI5Y2U2MDZkZTk1ZDVjOWRiNzImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.HxHCOnkY5pdg8_m46U12yAVYwBXixNd1_BVbGaWhCbY)
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
The text was updated successfully, but these errors were encountered: