Reach-ui: [Tooltip] Touch event support

[CodingDive]

🚀 Feature request

I'd love to see the tooltip on mobile. There is a note about this in the docs but I haven't seen an issue that actively keeps track of this missing feature until the a11y spec has evolved.

Touch Events: Touch events are currently not supported. There's not a lot of research or examples of these types of tooltips on mobile. We have some ideas but need to validate them first before implementing. Please adjust your interfaces on mobile to account for this.

Current Behavior

No tooltip is shown for touch events.

Desired Behavior

Tooltip should show when someone touches an element for an extended period of time on devices with touch screens. Basically the touch version of mouse hovering.

Suggested Solution

I don't think we want the tooltip to be shown immediately once the element is touched. Maybe we could wait for at least a second or more from the touchstart to the touchend event before showing the tooltip. This would also rule out element clicks.

Note that the specification does not seem to have settled on a solution for mobile/touch support but maybe we can find a solution that does not negatively affect a11y and greatly improves UX/DX. Once the specification is refined, the implementation could be changed to whatever the spec dictates.

From a UX perspective, I don't like my users having to deal with a modal or disclosure (although I love the new component! 🎉) when a tooltip feels more appropriate.
From a DX perspective, I'd rather not implement two completely different components for different screen sizes or devices with touch support.

Who does this impact? Who is this for?

Every user on mobile or other touch devices

---

Relates to the following issues
https://github.com/reach/reach-ui/issues/402
https://github.com/w3c/aria-practices/issues/128

Codesandbox to play with

[chaance]

The key phrase in the docs is:

We have some ideas but need to validate them first before implementing

This is very important for us before we move on touch events. We are working on a ToggleTip component that may be more appropriate for your use case, but my general advice is: if the tooltip content is important enough that you need it for mobile users, I'd reconsider using a tooltip altogether.