Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tooltip positioning for placement left and right #7654

Open
artola opened this issue Jan 23, 2025 · 0 comments
Open

tooltip positioning for placement left and right #7654

artola opened this issue Jan 23, 2025 · 0 comments

Comments

@artola
Copy link
Contributor

artola commented Jan 23, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant