CODEWITHSUNDEEP
angularng-bootstrapbootstrap-popover
tilo
tilo

Reputation: 14169

Keep popover open when hovering it

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.

Upvotes: 12

Views: 8588

Answers (2)

alexandros nikoloulopoulos
alexandros nikoloulopoulos

Reputation: 179

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>

Upvotes: 5

David Anthony Acosta
David Anthony Acosta

Reputation: 4908

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.

Upvotes: 2

Related Questions