Mobile "touch" doesn't work properly

[Sammyjo20]

On mobile (I tested with my iPhone 8), you can tap on the trigger for the tooltip and the tooltip appears correctly, but after tapping away and tapping again, it doesn't appear.

[nicroto]

Just came in to check if someone has reported this and... low and behold - it's the first issue in the list.
+1 also affected by this.

[Sammyjo20]

Yeah not sure how to mitigate this issue, haven't looked too far into it. I also noticed that it'll be nice if the component had the "default" styles scoped/inline with the component. Do you think it's a css issue?

[nicroto]

I haven't looked at the implementation. I guess it isn't a css issue and actually my problem is a bit different - it prevents the tapped thing to actually go through as action, meaning you need to tap it twice to get an actual action triggered, while on the desktop a single click would just work. I would take a stab at this, but am extremely busy at the moment, so if no one has fixed it by the time I get to it, I'll check it out.

[ivansieder]

Hi @Sammyjo20 and @nicroto, do you have any example code? After that, I'm gonna try to look into it! Which Browser are you using?

[Sammyjo20]

Hey @ivansieder, I personally just added it onto a button and used it as expected with the default styling you provided. I tried it with an iPhone 8 on iOS 12 using Safari.

[ivansieder]

Can you please test on https://codesandbox.io/s/9j86qy64zy if it's working as you expect it to?

[nicroto]

@ivansieder Thanks for the reply.

I think using the hover trigger partially resolves my problem, but for now I've switched off the tooltips on my app on mobile. I think the best way would be to have separate visual items (like a... "i"-buttons) to always show the tooltip on click, but the design doesn't really allow me to do such radical changes at this moment.

I've changed the example a little bit to be able to see when the button tapping/clicking has actually produced a result (the action went through).

On mobile Safari 10, the tooltip is pretty predictably shown the first time you tap, but then it's hard to find a way to show it, it's pretty unpredictable.

Is there a better event to handle on the mobile browsers? Something like tap-hold gesture or something similar?

[ivansieder]

Oh I see, so you wanna have the tooltip when you kinda "hover" (long-press) on the phone. Right? That's not what I think the tooltip is being thought to be doing. You can either implement some custom functionality using the "show" property and a "manual" trigger. This kind of showing a tooltip when long-pressing IMHO isn't something really user-friendly and should be avoided, as it can be something really user-blocking.

[Sammyjo20]

For me I think I'd like it to appear on "click" if it's on mobile. I know that mobile browsers such a safari try to do this with hover events, but I think it's just buggy. I've tried the link provided and I've got a video to show you what it does.

https://streamable.com/h7sq5

[ivansieder]

Hi @Sammyjo20, someone changed it from click to hover in the codesandbox. Please retry now, as it should be trigger on "click" now.

[Sammyjo20]

That seems to be working much better now! It does require you to click “off” first, but it seems to work consistently now. Whoop whoop 🚀

[ivansieder]

Using the long-pressing "hover" is not guaranteed to be working, I guess that is something Safari-specific that would be needed to be implemented, as on my Android (OnePlus 5T) it works as it should. Generally, hover-functionality on mobile touch-devices is something tricky.

Glad to have been able to help!

If this issue is closed for you, I'd like to ask you to also close the issue itself.

[Sammyjo20]

I agree. Good to work with you @ivansieder!