How can I keep bootstrap popover alive while the popover is being hovered in Angular 2, 4, 5, 6?

Question

I have gone through many post on SO related to popover I endup in angularjs or javascript post. This post explains the same requirement which i need but answer is in java script and they are using bootstrap3.

I have a span, I want to show popover on hovering it and I want popover to stay on screen when cursor is on popover.

<ng-template #popTemplate id="commentPopover">
   <div style="max-height: 6em;overflow: auto;" id="divPopover">
       {{ Comment }}
   </div>
</ng-template>
<span [popover]="popTemplate" placement="bottom" triggers="mouseenter:mouseleave">
      <i class="icon"></i>
</span>

Answer 1

I am posting a dirty fix as a answer but more solutions are still welcome.

After searching for the solution I end up in doing a dirty fix. Handled opening and closing or popover by mouse enter/leave event.

Component.ts :

mouseleave(popover: any) {
  this.hidePopOver(popover);
}

  hidePopOver(popover: any) {
    setTimeout(() => {
      if (!isNullOrUndefined(popover)) {
        popover.hide();
      }
    }, 500);
  }

  showPopOver(pop: any, comment: string) {
    if (comment === null || comment === '') {
      return;
    }
    if (!isNullOrUndefined(pop)) {
      pop.show();
    }
  }

component.html:

<div (mouseleave)="mouseleave(popover)">
  <ng-template #popTemplate id="commentPopover">
    <div style="max-height: 6em;overflow: auto;" id="divPopover"
          (mouseenter)="showPopOver(popover, Comment)" (mouseleave)="hidePopOver(popover)">
       {{ Comment }}
    </div>
  </ng-template>
  <span [popover]="popTemplate" placement="bottom" (mouseenter)="showPopOver(popover,Comment)">
      <i class="icon"></i>
  </span>
</div>