You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
When the tooltip is used in a container element that has position: fixed and is vertically scrollable the tooltip appears in the incorrect position. The bug gets more dramatic the further you scroll down.
Hover the Tooltip text. Tooltip appears in the correct position ✅
Scroll down any amount
Hover the Tooltip text. Tooltip appears further up on the page than before ❌
Continue to scroll down and hover to see the gap grow.
Expected behavior
The tooltip should appear positioned to the right of the Tooltip text at the same height no matter the scroll position and/or container position.
Screenshots
Desktop (please complete the following information):
OS: [macOS]
Browser [chrome, safari, firefox]
Version [3.0.0]
Smartphone (please complete the following information):
n/a: haven't confirm the bug happens on mobile
Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]
Additional context
It looks like the containerRef.top value shrinks as you scroll down which might be why the distance/offset from the top shrinks as you scroll further.
A work around for this bug is to:
On the parent/wrapping element of the Tooltip set the position: relative attribute
Using a global selector (i.e .your-parent-element-class-or-id :global(.tooltip.animation-null.top)) override the inset property on the tooltip with inset: unset !important
Add top: 0 !important;. This will need to be adjusted depending on the spacing.
The text was updated successfully, but these errors were encountered:
Describe the bug
When the tooltip is used in a container element that has position: fixed and is vertically scrollable the tooltip appears in the incorrect position. The bug gets more dramatic the further you scroll down.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The tooltip should appear positioned to the right of the Tooltip text at the same height no matter the scroll position and/or container position.
Screenshots
![Screenshot 2024-04-02 at 12 42 30 PM](https://private-user-images.githubusercontent.com/33362725/318940871-d50edd9a-56b5-46e8-a261-6c00a264d0c6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxMjY5ODUsIm5iZiI6MTcyNjEyNjY4NSwicGF0aCI6Ii8zMzM2MjcyNS8zMTg5NDA4NzEtZDUwZWRkOWEtNTZiNS00NmU4LWEyNjEtNmMwMGEyNjRkMGM2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDA3MzgwNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY4Nzg4NDUxNDFhYjJkYjVmMDU1MmI1NTQxYmJkNjM2NzM5M2RiMzQzYzUwN2Y1NzUxMDdjZGJlNjFmNGQzNjAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.dbI3wp9Yeu1xSI5ZmYTMxUihej40ZprXh_7ClTRnV5Y)
Desktop (please complete the following information):
Smartphone (please complete the following information):
n/a: haven't confirm the bug happens on mobile
Additional context
It looks like the containerRef.top value shrinks as you scroll down which might be why the distance/offset from the top shrinks as you scroll further.
A work around for this bug is to:
position: relative
attribute.your-parent-element-class-or-id :global(.tooltip.animation-null.top)
) override the inset property on the tooltip withinset: unset !important
top: 0 !important;
. This will need to be adjusted depending on the spacing.The text was updated successfully, but these errors were encountered: