Tooltip Arrow Misalignment After Screen Shrink, Persists on Expand

[AhmetYasarKaplan]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

Describe the bug
When the browser window is shrunk, causing the layout to become constrained, the arrow of an ix-tooltip becomes misaligned and no longer points correctly to its target element. The critical part of this issue is that this misalignment persists even after the browser window is expanded back to its original or a larger size. The arrow does not recalculate or update its position to re-align with the target element, remaining in a visually incorrect state.

Expected behavior
The tooltip arrow should always point accurately to its target element. When the screen size changes (especially after a shrink-then-expand sequence), the arrow's position should dynamically adjust and reposition itself to maintain proper alignment with the target element. It should be responsive to viewport changes and correct its position accordingly.

Actual behavior
As shown in the attached screenshot, after the screen is shrunk, the tooltip arrow gets displaced and fails to point to the target element. This incorrect positioning remains even when the screen is expanded, leading to a broken visual experience where the tooltip's arrow is detached from its intended anchor.

Screenshots

- Before shrinking:

- During shrinking:

- After expanding:

❌ Incorrect arrow position after screen shrink and subsequent expand

Steps to reproduce

1. Open a page containing an ix-tooltip (e.g., the provided code snippet).
2. Hover over the element that triggers the tooltip (e.g., "Hover me") to make the tooltip visible.
3. Shrink the browser window horizontally, making the viewport narrower. Observe if the tooltip or its arrow shifts or gets misaligned.
4. While the tooltip is still visible, expand the browser window back to its original size or a larger size.
5. Observe that the tooltip arrow remains in its misaligned position and does not correct itself to point to the target element.

What type of frontend framework are you seeing the problem on?

React

On which version of the frontend framework are you experiencing the issue?

react@19.0.0

Which version of iX do you use?

v3.2.0

Code to produce this issue.

https://stackblitz.com/edit/yuno8hra?file=src%2Ftooltip.tsx

[kghandour]

This might be related to a similar issue: #2099

[ManeeshJaikumar]

Hello @AhmetYasarKaplan, thank you for sharing the details on the issue.

As @kghandour rightly mentioned, we have two similar issues #2099 and #2076 related to the one you have raised. We already have the fix for the same which is in pipeline to be merged for the upcoming releases.

Request you to please track the status in either of the above mentioned tickets and I will close this ticket as its a duplicated.

Thank you.