Hide popover even if mouse is over the popover

[Tsubakura]

As I am using popover with hover trigger, I need the popover to disappear once my mouse is no longer over it. However, if I were to move my mouse quickly over the popover, the popover will no longer disappear, unless I either move my mouse over to the spot that triggered the popover or if I click once outside the popover.

Is there a way to stop this from happening?

[HappinessCookie]

Try to add some delay. It's helped to me

[panteaandrei]

Hello,
try adding this prop to the component:
:delay="{ show: 100, hide: 0 }"

[Tsubakura]

A delay does somewhat solve the issue I have, but it also brings an undesirable effect of also delaying the time it takes for it to appear initially. Nevertheless, it is definitely a good solution and I can consider this solved, but I was wondering if there's an even better solution to this?

[Akryum]

Maybe just add pointer-events: none; in CSS on the popover?

[mickeyvip]

I don't see this behaviour - when hovering over a popover it still disappears (the trigger is hover).

But I do need it to stay displayed while the mouse is over it. Is there a way to do it?

[Akryum]

@mickeyvip That's irrelevant to this issue, but you can look at the autoHide option.

[mickeyvip]

@Akryum, thank you for the quick response. the autoHide option does help, but not as I would expect:

When the popover/tooltip has offset 0 and the mouse goes strait to it - it does stay. But if the mouse leaves the trigger element and then hovers over the popover/tooltip - it always hides.

[rawul]

@mickeyvip Did you manage to find a fix for that? Facing the same issue.

[mickeyvip]

@rawul, we used manual trigger and listened for mouseeneter/mouseleave with timeout and it worked.

Then we made our own tooltip.