preactjs / preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
https://preactjs.com
MIT License
36.82k stars 1.95k forks source link

[preact/compat] @radix-ui/react-tooltip immediately hide tooltip after hover on element #3805

Open glook opened 1 year ago

glook commented 1 year ago

Describe the bug Radix tooltips immediately closing after hover on element

CleanShot 2022-11-18 at 16 34 03@2x

CleanShot 2022-11-18 at 16 37 17

To Reproduce

https://codesandbox.io/s/preact-radix-ui-react-tooltip-issue-lshsmd?file=/src/App.tsx

Steps to reproduce the behavior:

  1. Hover on button
  2. You will see that tooltip will be visible for just a moment

Expected behavior Expected that tooltip will be visible all time when cursor is hover button

iPavlikov commented 8 months ago

Hello! Any updates on this issue?

wolfflow commented 3 months ago

Still buggy

nikogoli commented 3 months ago

I found a solution. It does not "solve" the problem, but works anyway.

https://codesandbox.io/s/preact-radix-ui-react-tooltip-issue-forked-kys9rl?file=/src/tooltipDemo.tsx

Just import useState and create a boolean-state and its stateUpdater, and pass them as open and onOpenChange properties of <Tooltip.Root>.

2024-08-13-000134

I found this technique in the code of shadcn/ui's Collapsible-demo.

JoviDeCroock commented 3 months ago

@nikogoli Very interesting find, I really wonder if it's some kind of double event firing/... but it stands out that if other libraries are running into it that it might not be isolated to preact 😅