I want to understand why mouseenter and mouseleave events work on mobile.
I am trying to create a tooltip that hovers on desktop but is clickable on mobile and at first, I just went ahead and implemented those events on VueJS but for some reason when I tested it on mobile, it automatically switched to clickable events. Also, it automatically handles the blur event on mobile (clicking outside it, would close the tooltip)
I could only think of three reasons, either:
- Browser automatically switched the events
- Vue is doing the switching of events
- DOM is doing the switching
I also created a simple codesandbox to play with.
EDIT:
I just tried replicating it on vanilla JS, and same behavior.
Here's the codesandbox.
Based on this, is this safe to continue with this?
I couldn't find any docs that stated this behavior.