Tooltip animation issue(?)

[gapeienko644a]

I'm not sure if it's a bug, but when you flick the cursor out of the tooltip trigger and then back in, the content doesn't appear. My use case was in a data table — when doing a general use case actions on the table, it felt kind of annoying. After breaking it down to figure out why this happens in shadcn but not in the radix primitive, I found out that the reason was data-[state=closed]:animate-out in TooltipContent

output.mp4

[gapeienko644a]

Well, it’s kind of rare, but it still happens in the data table even after removing data-[state=closed]:animate-out. From what I see, it works fine when hovering over the area of a single row, but it can still bug out when moving the cursor between rows.

output.mp4

[gapeienko644a]

I think I understood the reason. Since disableHoverableContent is true, I don’t need to be able to select text from the content — copy to clipboard will happen on click anyway. When the content collides with the cursor (in the example it’s visible because of the arrow), for some reason it resets the state that the cursor is still on the trigger, so the content gets hidden. That’s why it is became rare after removing data-[state=closed]:animate-out — it just caused fewer animations and reduced the chances of the cursor colliding with the content, which would lead to the reset.

Frontend is just a hobby for me, so I don’t fully understand how this works under the hood. I’m not sure if this is a bug/issue or if the position of the content just needs to be adjusted to avoid the collision. I'd be happy to hear any thoughts.

output.mp4

[gapeienko644a]

I added cursor-not-allowed and pointer-events-none (maybe one of them would be enough, I have not tested individually) to TooltipContent className to avoid the "reset" caused by the cursor collision — and rapid movements between rows became consistent, as I think they should be. But then I tried to bring back data-[state=closed]:animate-out, and the issue described here happened again: #7161 (comment).

So apparently, some things with collision take place, but not sure what about data-[state=closed]:animate-out