[Tooltip] Tooltip component doesn't work on iOS Safari (14.4)

[jordie23]

Bug report

The Tooltip component isn't working on iOS Safari.

Current Behavior

Tapping on a tooltip component doesn't show the content

Expected behavior

Content shows when tapping a Tooltip component

Reproducible example

1. Load up this page on iOS (14.4 is what I used in simulator and 14.6 on my own phone):

https://www.radix-ui.com/docs/primitives/components/tooltip

2. Tap the + in the example.

Suggested solution

Content should show on tap events

Your environment

Below is my env, but it's also not working on whatever your website env is.

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-tooltip	0.1.1
React	n/a	17.0.2
Browser	Safari iOS	14.4 ad 14.6
Assistive tech	n/a
Node	n/a	v14.17.3
npm/yarn	npm	6.14.13
Operating System	iOS	14.4

[benoitgrelard]

This is by design. Tooltips are problematic on touch devices because there is no hover interaction, so if it was on tap it would fight with the general button action, or require 2 taps. That's also why tooltips should just be used generally for extra information that isn't mandatory do use your interface.

[jjenzz]

I wonder if it is worth looking into this though. Material UI provide a "touch" option for this which appears to be a longpress: https://mui.com/components/tooltips/#triggers

Perhaps we can do something similar?

[jordie23]

Tooltips aren't usually just superfluous information, they generally important information just hidden away until required. I do typically see the hover ability on desktop replaced with a tap action on mobile.

I mean, here, on your own documentation page you've made the tooltips accessible on mobile devices. Why would you do that if it wasn't important information?

I'd suggest one or more of the following actions:

• modify the documentation page to mention the tooltip component doesn't work for and isn't designed for mobile/touch devices
• add an example on how it could be modified to work with touch devices (as per your own use case ^)
• provide default support for touch devices, perhaps behind a boolean prop flag? If it's opt-in, the developer would understand the limitations/interference this might have with button actions.

[benoitgrelard]

I wonder if it is worth looking into this though. Material UI provide a "touch" option for this which appears to be a longpress: https://mui.com/components/tooltips/#triggers
Perhaps we can do something similar?

I personally don't think that makes much sense (for the reasons highlighted below). A tooltip is usually used to provide more info about a trigger that already does something. How would you know you can long press it?

I mean, here, on your own documentation page you've made the tooltips accessible on mobile devices. Why would you do that if it wasn't important information?

That is not a tooltip, that's a popover, the interaction for those is pointer down.
The big difference here is that there isn't 2 functionality attached to the same trigger.
Tooltips work fine with focus or hover, because they are attached to triggers with pointer down actions.

So it looks like perhaps we need to emphasize more in the docs the differences between the patterns?

[jordie23]

That is not a tooltip, that's a popover, the interaction for those is pointer down.
The big difference here is that there isn't 2 functionality attached to the same trigger.
Tooltips work fine with focus or hover, because they are attached to triggers with pointer down actions.

So it looks like perhaps we need to emphasize more in the docs the differences between the patterns?

AHHHH I see. That makes so much more sense now. I guess I didn't think about the popover being used in that way, I figured it was always for more complex use cases. Thanks for the clarification.

I think perhaps a note on the Tooltip page referencing the Popover might help silly people like me who generalise what a Tooltip is?

[jjenzz]

A tooltip is usually used to provide more info about a trigger that already does something

True. Plus, I just realised that the WAI ARIA tooltip docs (wip) suggest they're intended for focus/hover only.

I think perhaps a note on the Tooltip page referencing the Popover might help silly people like me who generalise what a Tooltip is?

Agreed. We have spoken about having a "When to use" section for the components as these patterns can appear to overlap, it's all a bit confusing. I'll let the team know that we've had another request for this 👍

EDIT: I created a new issue on the website repo instead radix-ui/website#272

[yangmingshan]

I found a naive way to make Tooltip working on both pointing device and touch device. In my use case, it's just an info icon like your website, it's not a general button, so there will be no event conflict. Not sure any downside of this solution.

https://codesandbox.io/s/smoosh-forest-553n1q?file=/App.js

And it let me thinking, can we add an option to make Tooltip working on both pointing device and touch device, but it can not be a general button, so we can avoid event conflict? 🤔

[guidominguesnk]

You are a god

[yangmingshan]

@benoitgrelard Sorry to ping you, but what's your thoughts?

[benoitgrelard]

Hey @yangmingshan,

In my use case, it's just an info icon like your website, it's not a general button, so there will be no event conflict. Not sure any downside of this solution.

In that case, a Popover is probably more appropriate then.

And it let me thinking, can we add an option to make Tooltip working on both pointing device and touch device, but it can not be a general button, so we can avoid event conflict? 🤔

No that's not possible, a tooltip is here to display a "tip" regarding a given "tool", there should always be an action behind this, so it's not possible to avoid event conflicts.

[kaptn3]

@benoitgrelard hi! sorry for ping, but what else I need opens popover on hover event on desktop and on click event on mobile devices, what I must use popover or tooltip?