I have a purely CSS-based tooltip that appears on hover (`mouseenter`) and disappears on `mouseout`/`mouseleave`; on click, it runs some code that happens to keep the user on the same page. However, on mobile, the `mouseenter` and click parts run at the same time, which leaves me with a visible tooltip that doesn't disappear until you tap somewhere else on the page since there's no natural `mouseout`/`mouseleave`.

To improve the UX, I tried to simulate the `mouseout`/`mouseleave` event on the clicked element after 1.5s (using `setTimeout()`), which doesn't work:

```
$('.my-element').on('click', function() {
  // Other stuff

  setTimeout(function() {
    $(this).trigger('mouseleave');
  }, 1500);
});

```

and

```
$('.my-element').on('click', function() {
  // Other stuff

  setTimeout(function() {
    $(this).mouseleave();
  }, 1500);
});

```

I've also tried using a specific element selector instead of `$(this)`, which didn't work either.

Now, I'm trying to simulate a page click to reset the hover event using:

```
$('.my-element').on('click', function() {
  // Other stuff

  setTimeout(function() {
    $('body, html, #main').trigger('click');
  }, 1500);
});

```

If I trigger the click on a different element such as my hamburger menu, the trigger works. And if I manually tap somewhere else on the page, it resets the tooltip hover and hides it, which is what I'm trying to achieve.

I'm trying to just simulate what would happen on the `mouseout` event or page click as opposed to trying to target touch devices since the rest of the behaviour is fine for mobile.