Tooltip doesn't work on iOS

[poisa]

You can test this in the official documentation https://fluxui.dev/components/tooltip

The first time you try a tooltip there is a chance that it shows properly but often it does not. All subsequent times it fails.

I can reproduce this every single time in both Safari and Chrome for iOS 18.1 on an iPhone 16 Pro Max.

[calebporzio]

Ah yep, I see what you're saying. Question for you: what is the behavior you would expect from tooltips on mobile devices?

A) Not show at all (because there's no hover on touch devices) B) Show on tap (and allow the thumb press to trigger click listeners as well) C) Show on first tap, and prevent underlying click until second tap D) Show on press and hold

Here are two examples of different behaviors I found around the web:

1) GitHub: GitHub's tooltips are CSS based and show when a button is focused. So the tooltip will show if you press or hold a button, and the button will receive the press simultaneously: https://github.com/livewire/livewire

2) Radix UI: The Radix tooltip seems to be completely disabled on mobile: https://www.radix-ui.com/primitives/docs/components/tooltip

Just want to see what people expect before we explore this more.

[poisa]

I would go with option B: show on tap and allow the thumb press to trigger click listeners as well.

I wouldn't ever use a tooltip for buttons to be honest, but that may just be personal preference. I think the expectation for buttons is to perform the action the button suggests and nothing else. If you want to show a tooltip, sure, but do the expected button action too.

I was thinking more in terms of things like these, where the information is most commonly found on tooltips than an expandable text area or similar:

In the above case, it's information that you need only the first time that you use the form, so it would clutter the UI if we had it always be present.

As far as the other options, here are my opinions:

A) Not show at all (because there's no hover on touch devices)

This is the one I like the least as it requires two different designs, for mobile and bigger screens.

C) Show on first tap, and prevent underlying click until second tap

This messes with the normal expectation of a control. If it's a button we should be able to tap/click it and have it do what it's expected to do.

D) Show on press and hold

This one is tricky because it depends on how mobile implements selections. In iOS if you hold, you get the text selection options, dictionary, translation, etc., so it looks messy. I like this in terms of usability but in the real world I'd avoid it.