Tooltip position misalignment inside nested scroll containers
Author: kryaksyCreated May 21, 2025Updated May 22, 2025
What version of rsuite are you using?
5.70.2
What version of React are you using?
18.3.1
What version of TypeScript are you using (if any)?
5.4.5
What browser are you using?
Chrome
Describe the Bug
When a Tooltip is used inside two nested scrollable containers, its position becomes misaligned after scrolling the inner container. The tooltip no longer stays anchored to the trigger button. However, scrolling the outer container does not cause any misalignment — in that case, the tooltip behaves correctly.
Expected Behavior
The tooltip should remain correctly positioned relative to the trigger button, regardless of which scrollable container is being scrolled.
I'm not sure if this is considered a bug or an expected limitation, but I'm open to any suggestions or workarounds. Thanks in advance!
To Reproduce
A full reproduction can be found here:
https://codesandbox.io/p/sandbox/tooltip-loses-scroll-position-jstfsy
Steps:
- Open the sandbox.
- Click the “Tooltip” button to display the tooltip.
- Scroll the inner scroll container — the tooltip becomes misaligned and drifts away from the button.
- Scroll the outer scroll container — the tooltip stays correctly positioned.
Source: rsuite/rsuite