Show tooltip on touch devices

[bitworking]

🙋 Feature Request

Tooltips should also be shown on touch devices.

🤔 Expected Behavior

When I long-press on the trigger button the tooltip should be shown.

😯 Current Behavior

Tooltips do not appear on touch devices. The trigger button is shown but nothing happens if you press it.

💁 Possible Solution

The most obvious solution would be a long-press on the trigger button. The delay should be the same as for hovering.

🔦 Context

A tooltip shows further information which might not be interesting for every user (form fields for example). So you do not always need to display it. But if it does not work on touch devices, you need another solution for example hide the button and show the text under the form field. But since the space on mobile devices is already limited, this is suboptimal and also would involve a lot of work.

💻 Examples

The design guide of Material Design for example also recommends to show the tooltip on hover, focus or long-press: https://material.io/components/tooltips

🧢 Your Company/Team

I'm building a component library (nx-kit) for my company nexum AG: https://github.com/nexumAG
The repo is still private but will be openend if we are out of the early phase. The first components are on npm for testing, though: https://www.npmjs.com/search?q=%40nx-kit

[devongovett]

I think we won't do this by default because there may already be long-press gestures associated with an element, but I think it makes sense as an option for certain use cases.

[Andarist]

Question - if we treat tooltips as accessibility feature then shouldnt favoring other press-based actions on elements with tooltips be discouraged?

[devongovett]

I think for cases where the element's only purpose is to display a tooltip it might make sense to make them appear on touch. e.g. a help icon like this: https://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance

[Andarist]

Right - I got this from your earlier comment. Im just wondering if making a component with tooltip and other pressable action just shouldnt be allowed (or heavily discouraged) as not showing the tooltip makes the whole thing less accessible. I dont have a strong opinion about this one myself - just posing a question.

[devongovett]

Yeah I agree it should be avoided I think. Long press is especially problematic with touch screen readers.

[well1791]

@Andarist @devongovett is there any good solution to support a11y for touch devices?

I've tried the tooltip example using android TalkBack, and it the result is:

• the reader gets to the button but
• the trigger doesn't open the tooltip on focus
• the trigger doesn't open the tooltip on click

So, I'm wondering if fixing this issue on touch devices is part of the a11y scope, or, if there is any good solution using react-aria/react-stately to handle this situation.

[snowystinger]

You can always use an aria-label.

You could also place a button with a popover next to the element you want the tooltip on, this popover could then contain the extra information. We will be releasing an alpha soon for a component called "Contextual Help" that is for this purpose.

[well1791]

@snowystinger That's a good idea indeed, in my case I'm displaying the information on touch devices.

Also, I believe that this information should reach the docs, like: "Notice, for touch devices tooltip won't work as expected due to ..., check this codepen/repository (link here) for an alternative solution"

Let me know if I can be of help with that.

[snowystinger]

Sure, we'd welcome a contribution. I think my first note would be to change the message from won't work as expected, since no one expects tooltips on touch, to something along the lines of "See usage guidelines for tooltips here https://spectrum.adobe.com/page/tooltip/#Use-tooltips-to-describe-icons. Keep in mind that tooltips do not appear on touch devices because there is no hover and there is no keyboard focus. If you have information that is critical, consider using help text descriptions as in the guidelines or a button that opens a popover with the extra information directly to the side."

Tooltip docs are here https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/tooltip/docs/Tooltip.mdx
and here https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/tooltip/docs/useTooltipTrigger.mdx

[well1791]

@snowystinger it makes total sense. I think I'm going to go for the popover, thanks replying.

[devongovett]

Here's a reference for our implementation in Spectrum if you're curious https://react-spectrum.adobe.com/react-spectrum/ContextualHelp.html

[dannify]

Closing as stale. This is not work that the team is able to take on in the near future.