tooltips icon indicating copy to clipboard operation
tooltips copied to clipboard

🐛 Position: fixed + overflow: scroll bug.

Open austincallaghan opened this issue 1 year ago • 1 comments

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.

Screenshot 2024-04-02 at 12 41 08 PM

Screenshots Screenshot 2024-04-02 at 12 42 30 PM

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.

austincallaghan avatar Apr 02 '24 19:04 austincallaghan

Hi everyone, are there any updates? Is the team planning to fix this bug?

oyusypenko avatar Nov 27 '24 18:11 oyusypenko