[Bug][Tooltip] Close animation in tooltip generates a flickering effect on touch devices

[GustavoHenriqueP]

Bug report

Current Behavior

When adding a close animation on the Tooltip, it works normally with the mouse, but has a side effect on user touch events in touch devices, calling the close animation for a moment after the user touches the tooltip trigger, showing a flickering tooltip.

Example with mouse:
https://github.com/user-attachments/assets/ad6fbf02-4102-4ffd-a4c0-b4db48c75cf7

Example with touch, when the bug occurs:
https://github.com/user-attachments/assets/8cef6a49-c10c-4a43-8989-64a3e744dea4

I confirmed this happens in physical touch devices too.

Expected behavior

Tooltip remains closed independent of the user action in touch devices.

Reproducible example

CodeSandbox Example

Suggested solution

I've observed that the data-state of the componente changes for a briefly moment when touching the trigger, returning to "data-state=closed", hence calling the close animation, even if the tooltip was not opened before. Then, because of the animation feature of await the animation to end before unmount the component, the tooltip remains visible for that animation duration.

I do not know exactly how to fix this right now, but I can take a better look in the code and submit a PR if you think it's a valid issue.

Additional context

None.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-tooltip	1.1.3
React	n/a	18.3.1
Browser	Chrome	130.0.6723.70
Assistive tech	n/a
Node	n/a	20.16.0
npm/yarn	npm	10.8.2
Operating System	Windows 11	23H2 - OS Build 22631.4317

[Lexachoc]

AFAIK, tooltip will not work in touch devices. See #955 (comment)

[GustavoHenriqueP]

I had seen this controversial issue previously haha. But I think this case is a little different. The expected behavior that the team behind radix mentioned in this issue that you commented on would be to not have any action in the tooltip when tap the trigger on touch devices.

This is the same thing I would expect to occur when tapping in tooltip's triggers with close animations, but that is not being the case.

AFAIK, tooltip will not work in touch devices. See #955 (comment)

[Lexachoc]

@GustavoHenriqueP I guess the flickering reflects what the team means "not work in touch devices"?
(If this is not the case, then perhaps it would be a bug?)
Because I have the same issue when using the dev tool in Chrome to simulate touch devices.

I saw a comment somewhere in the discussion that we can detect if it is a touch device or not. And then we can convert the tooltip into a popover so that it also works on touch devices. Or we can disable the tooltip based on this.

BTW, I like the behavior of displaying a tooltip when long pressed (some people want that too). But the team doesn't agree with that. One has to do this manually to achieve this behavior.

[GustavoHenriqueP]

@Lexachoc For my understandig, "not work in touch devices" is the fact that the tooltip does not appears in any touch events, like tap, double tap or long press.

I really think this is a bug, because is possible to see the data-state of the element changing with a fraction of second, hence triggering only the close animation. I imagine the ideal would be the state does not changing at all.
Because of that, I had to remove close animations in all my apps with radix. Another alternative would be disable the tooltip when we detect that the user's device is a touch device, but I really think this adds a unnecessary complexity on the code to just workaround a bug.

And I agree with you about include some options to show the tooltip in touch devices, as a long press event! But unfortunately I think this will not happen anytime soon 😕.