Keep popover open when hovering it

Question

I have set up an element that triggers a NgbPopover on hover:

<a [ngbPopover]="popContent" popoverTitle="MyPopover" triggers="mouseenter:mouseleave">Hover me</a>

Currently, the popover will be shown when hovering the element and consecutively dismissed when leaving the area. What I'd like to achieve is to keep the popover open when the user hovers it, and only dismiss it when the user moves away from the element or the popover.

This SO question may be related, but never got an answer. Another related question that received some attention, where the proposed solutions (e.g., this one) make use jQuery.

Going

Safiyya's solution works great for me. github.com/ng-bootstrap/ng-bootstrap/issues/… – Mouth

Answer 1

Sorry for the late answer but check out this super easy solution with 2 lines of code:

<div  (mouseleave)="p.close()">
<button type="button" placement="left" (mouseenter)="p.open()" #p="ngbPopover" ngbPopover="Popover Content">Click me </button></div>

Muggins

Answer 2

Then just remove mouse leave....

  <button type="button" class="btn btn-outline-secondary" ngbPopover="You see, I show up on hover!" triggers="mouseenter" popoverTitle="Pop title">
    Hover over me!
  </button>

Otherwise, if you are saying that you want it to close only on mouseout of the popover...That's kind of difficult, since it opens on mouse over of the button. But i suppose you could have some kind of mouseleave event listener. Seems kind of tedious for something that doesn't make much sense, though, in my opinion.

Adman

Thanks for your answer. I already know that I can remove mouseleave, but then the popopver stays open until I hover the element again. This is not what I want to do. – Going

well i'm not quite understanding what you are trying to do. Can you explain? – Adman

Sure, I'll update my question with another related link + demo. – Going