悬停时保持弹出窗口打开

Question

我已经设置了一个触发NgbPopover悬停的元素:

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

目前,当悬停元素时将显示弹出窗口,并在离开该区域时连续解除.我想要实现的是当用户将其悬停时保持弹出窗口打开,并且仅当用户离开元素或弹出窗口时才将其关闭.

这个问题可能是相关的,但从来没有得到答案.另一个受到关注的相关问题,提出的解决方案(例如,这个)使用jQuery.

Answer 1

抱歉回答晚了，但请使用 2 行代码查看这个超级简单的解决方案：

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

Answer 2

然后把鼠标移开就可以了....

  <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>

否则，如果您说您希望它仅在鼠标移出弹出窗口时关闭...这有点困难，因为它在鼠标悬停在按钮上时打开。但我想你可能有某种 mouseleave 事件侦听器。不过，在我看来，对于一些没有多大意义的事情来说，似乎有点乏味。