ngx-bootstrap - закрывает поповер после того, как курсор покидает сам поповер

Question

У меня есть следующая структура, использующая ngx-bootstrap popovers с пользовательскими триггерами , и все, кажется, работает отлично, кроме той части, где я хочу закрыть поповер после этоготакое событие 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 и использовать событие (mouseleave) в этом div, чтобы вручную скрыть поповер.

Вот код

<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