Description
On web, the Tooltip component correctly auto-determines which side (top, bottom, right, left) to render on based on the available space between the trigger and the viewport. If there is insufficient space on the preferred side, the tooltip automatically flips to the opposite side (e.g. top → bottom).
On native, this auto-flip behavior does not seem to work correctly. When there is insufficient space, the tooltip does not flip for top or bottom, resulting in the tooltip being partially or fully off-screen.
Expected behavior
- Tooltip should automatically flip to the opposite side when there is insufficient space.
- Behavior should be consistent between web and native.
Example:
- Preferred side: top
- Not enough space above trigger
- Tooltip should render on bottom
Actual behavior (native)
- Tooltip does not auto flip when using side="top" or side="bottom" and there is not enough space
- Tooltip renders (partially) off-screen even when there is clearly too little spa
Reproduction
I created a minimal reproduction repo demonstrating the issue:
🔗 https://github.com/thimonwentink/rn-primitives-tooltip-test
In this example, I'm setting the side to "bottom," so if there's not enough space, the tooltip should be rendered at the top. Tip: You'll have to scroll a bit on mobile to see the trigger. The large padding was added so you can easily test it on the web as well.
Platforms
- Web: ✅ works as expected
- Native (iOS / Android): ❌ auto-flip does not work correctly
Additional notes
Furthermore, it would make it easier for developers if the actual side is exposed, so we could apply logic to it. For example, we could then render an arrow pointing in the correct direction ourselves.
Happy to provide additional info if needed 👍
Description
On web, the Tooltip component correctly auto-determines which side (top, bottom, right, left) to render on based on the available space between the trigger and the viewport. If there is insufficient space on the preferred side, the tooltip automatically flips to the opposite side (e.g. top → bottom).
On native, this auto-flip behavior does not seem to work correctly. When there is insufficient space, the tooltip does not flip for top or bottom, resulting in the tooltip being partially or fully off-screen.
Expected behavior
Example:
Actual behavior (native)
Reproduction
I created a minimal reproduction repo demonstrating the issue:
🔗 https://github.com/thimonwentink/rn-primitives-tooltip-test
In this example, I'm setting the side to "bottom," so if there's not enough space, the tooltip should be rendered at the top. Tip: You'll have to scroll a bit on mobile to see the trigger. The large padding was added so you can easily test it on the web as well.
Platforms
Additional notes
Furthermore, it would make it easier for developers if the actual side is exposed, so we could apply logic to it. For example, we could then render an arrow pointing in the correct direction ourselves.
Happy to provide additional info if needed 👍