Option to show tooltip on touch devices

[rChaoz]

🚀 Feature request

Provide an update to Tooltip to allow it to open immediately on tap, closing on further outside interactions.

🧱 Problem Statement / Justification

In some cases, it is desired to have a tooltip that also works on mobile, where there is no hover. Currently, this is not possible, and the only way to display important info (that can't be missing on mobile) is using a popover.

A use-case is the little info icon that commonly sits next to input fields or displayed data. What better example to show this in action if not YouTube:

when hovered on desktop/tapped on mobile

✅ Proposed solution or API

An optional prop that, when set to true, enables this behaviour (e.g. showOnTap). It should be disabled by default as this is not always wanted, e.g. tooltips on interactive elements.

↩️ Alternatives

A combined Popover + Tooltip. This is quite complicated to achieve (ID handling, close one when the other opens...) and doesn't have the correct behaviour, as it also opens on click on desktop, which is not intended.

📝 Additional Information

I'm happy to make a PR for this if that's okay 🙂

[ShaneYu]

Funnily we've been having a similar chat as we've just implemented the tooltip component and spotted it wasn't coming up on press (mobile and tablet). But I am unsure that it should show, if you have a tooltip on a button that say opens a modal or a drawer, there is no point showing the tooltip as the modal will be opened. The moment you touch/press a button on mobile it's clicked.

Ideally we should not be using tooltips on things that aren't accessible, therefore I am unsure if there is any actual use case for a tooltip to show on tap/press. However I can still see the popover being useful as the button can be setup just to open the popover and doesn't perform some other action.

Hope this makes sense, but we're going to monitor this discussion to see where it goes for now! 😁

[rChaoz]

Yeah, I don't want all tooltips to open on mobile, only a few. My primary use case is exactly the one described above (info icon thingy). This should definitely be opt-in via a prop, but would be a great addition.