🐛 Position: fixed + overflow: scroll bug.

[austincallaghan]

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:

1. Go to Bug Repl
2. Hover the Tooltip text. Tooltip appears in the correct position ✅
3. Scroll down any amount
4. Hover the Tooltip text. Tooltip appears further up on the page than before ❌
5. 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:

1. On the parent/wrapping element of the Tooltip set the position: relative attribute
2. 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
3. Add top: 0 !important;. This will need to be adjusted depending on the spacing.