Tooltip misalignment when scrolling

[hemae]

Bug description When using tooltips inside scrollable containers (specifically the window), the tooltip appears correctly next to the target element in the initial scroll state (see Screenshot 1). However, after scrolling the parent element (window), the tooltip appears misaligned—either above or below the target element (see Screenshot 2).

Version of Package v5.28.0

To Reproduce

• Add a tooltip to an element inside a scrollable window.
• Observe correct tooltip positioning before any scrolling (Screenshot 1).
• Scroll the page.
• Observe the tooltip’s incorrect positioning after scrolling (Screenshot 2).

Expected behavior The tooltip should remain aligned with the target element regardless of the scroll position.

Screenshots

Desktop:

• OS: macOS Monteray 12.6.1
• Browser: Google Chrome
• Version 128.0.6613.139 (Official Build) (x86_64)
• Frameworks: React 17.0.2

[gabrieljablonski]

Have you tried moving the tooltip component inside the scrollable parent? That usually fixes the issue, but depending on your project's structure, it might not be viable for you to do.

Let me know, and I'll try to suggest some other approach.

[github-actions[bot]]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.

[AdamDia]

Any updates here I am facing same issue with Android devices

[gabrieljablonski]

@AdamDia as suggested above, you should try placing the <Tooltip /> component anywhere inside of the scrollable parent.

If that does not help, we would need a reproducible example to be able to help further.

[github-actions[bot]]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.