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.