ngx-bootstrap - 在光标离开弹出框本身后关闭弹出框

Question

我有以下结构，使用 ngx-bootstrap popovers with custom triggers，一切似乎都很好，除了我想在出现mouseleave 弹出框本身的事件。

我该怎么做？

<div [popover]="popTemplate" triggers="mouseenter:mouseleave"></div>

<ng-template #popTemplate>
    <p>Popover content.</p>
    <button type="submit">Click me</button>
</ng-template>

Answer 1

您可以将弹出窗口内容包装在 div 中，然后在该 div 上使用 (mouseleave) 事件手动隐藏弹出窗口。

这是代码

<div [popover]="popTemplate" #pop="bs-popover" style="background-color:black" triggers="" (mouseenter)="pop.show()">This is a test</div>

<ng-template #popTemplate>
  <div (mouseleave)="pop.hide()">
    <p>Popover content.</p>
    <button type="submit">Click me</button>
  </div>     
</ng-template>

这是一个示例演示

https://stackblitz.com/edit/ngx-bootstrap-rtrgyr?file=app%2Fapp.module.ts