[Tooltip] Scaling the trigger whilst trying to open prevents opening

[benoitgrelard]

Bug report

Current Behavior

Originally from Discord (https://discord.com/channels/752614004387610674/803656530259738674/902977153715544137)

hi all! i've got a issue with React.Tooltip when its container is animated (e.g. with framer-motion). repro here: https://codesandbox.io/s/proud-wave-tjovb?file=/src/App.tsx
seems like the tooltip flashes and when the container scales it disappears, if i mouse out and mouse back when the button is scaled up, the tooltip will now display properly

Expected behavior

The tooltip should open

Reproducible example

https://codesandbox.io/s/proud-wave-tjovb?file=/src/App.tsx

[benoitgrelard]

My initial thoughts:

Hi @tarngerine I think I know what's going on here. We have some code that attempts to hide the tooltip when the trigger is scrolled away. To enable this, we used getBoundingClientRect to check if it's position moved. Unfortunately, DOMRect's take transforms into account, so when the trigger gets scaled up, our implementation thinks it moved. I'll log an issue with your sandbox and we'll see if we can improve things here, I have an idea we could try.

[benoitgrelard]

Initial idea for a solution:

If we want to keep closing when the trigger moves, we could ignore position changes (rect.left, rect.top) if the size changed (rect.width, rect.height accordingly).

[dmwin72015]

It took me a long time to solve the problem，FK

[benoitgrelard]

The issue is even more apparent/problematic when the tooltip trigger is inside a popover, as the popover gets repositioned then if the tooltip trigger is focused as the popover opens, it will instantly closed.

[hrbengtsen]

Initial idea for a solution:

If we want to keep closing when the trigger moves, we could ignore position changes (rect.left, rect.top) if the size changed (rect.width, rect.height accordingly).

What is the reason for wanting to close when the trigger moves? I'm currently experiencing a similar issue, but with different transforms like rotate and translate, so I don't think checking if the size changed will fix that.

[benoitgrelard]

The initial reason was to avoid having a tooltip go over areas that are scrollable (given that it's portalled).
It was a cheap attempt at trying to avoid that, but that's caused other issues obviously.
We might end up removing this, and wait to see if we get many bug reports on the original issue instead and try to address.

[benoitgrelard]

After a bit of investigation, we will remove the current solution and implement a better solution based on scroll events.

Note: This might be better implemented in react/popper as a new boolean prop, as it could be useful for non-modal popovers, menus, etc

[benoitgrelard]

This has been fixed and is available in the latest rc: https://www.npmjs.com/package/@radix-ui/react-tooltip/v/0.1.8-rc.2