search

hekigan / vue-directive-tooltip

Vue.js tooltip directive. Easy to use, configure and style
https://hekigan.github.io/vue-directive-tooltip/
MIT License
173 stars 33 forks source link

iPhone click seen as hover #24

Closed MadReal closed 6 years ago

MadReal commented 7 years ago

Hello, have you noticed the behavior of the tooltip on iPhone? It will prevent the click because on click it will first show the tooltip than you have to click again to actually do the action.

Do I have to configure something specific? Or what would be the best way to disable the tooltips on phone?

Thanks

hekigan commented 7 years ago

I will have to double check that, thank you for your feedback!

seyfer commented 6 years ago

I have a similar issue maybe. It is easy to test even in the Chrome Ipad simulation.

I have a click event on the parent element and v-tooltip in the child. The problem is, that v-tooltip captures click event and parent click isn't triggered. The event should not be captured.

hekigan commented 6 years ago

I have been trying to replicate the behaviour

https://codepen.io/hekigan/pen/ZxYZpa

In the simulator with iPad, on click, I still get the "action" word showing up in the console. Can you give me a piece of code that would show the problem?

seyfer commented 6 years ago

@hekigan, in your codepen example, move @click to the parent element <p>. Then you will see the problem. It will not be triggered.

Well, strange, now it works https://codepen.io/anon/pen/mxJRNo When I faced the problem, tooltip was assigned to the table tr element, but click event was bound to the parent table container which was div. Maybe also it depends on css?

hekigan commented 6 years ago

The only way you would lose the event is if you are using the manual or click mode. And I am considering removing the preventDefault in there.

riksnelders commented 6 years ago

Same here. I dont want a tooltip when using ios/safari . Option to disable tootlip when mobile device is used an idea maybe ??

hekigan commented 6 years ago

Hi guys!

I took a long break because the family grew bigger :)

So, I am not sure how many of you have been having trouble with this, but it's not a bug per say but a feature according to Safari's devs. This is a famous problem and I did a lot of digging to see what was involved.

It is annoying to go around but at the same time I do understand the reason behind the implementation. First tap is for the hover event (either JS or CSS, this is important), the second confirms that you want to click and not just hover.

In the situation where you just have a normal tooltip (let's say for a pagination), you want to just display the tooltip on the first tap and then click it on the second one. That's all well, but this tooltip lib can also be used to display interactive html content. And in this case, it means trouble because you don't want to click twice.

So for this specific reason and because I don't want to have a breaking change, I think that the most elegant solution is to add a .ios modifier (like .prevent for example). What it will do is, on mobile safari on iOS, remove the hover event and substitute the click event for it. On other platform, it will retain the usual behaviour without any need for you to get involved. I did test a first implementation and it fixed the issue for me.

I am planing to push the change maximum next week.

riksnelders commented 6 years ago

First of all Congrats!

Second, seems like a good fix! Added a workaround for this issue myself by just disabling it on any ios device. Seems to work for now.

hekigan commented 6 years ago

Ok, fixed and pushed: https://github.com/hekigan/vue-directive-tooltip/releases/tag/v1.5.0