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>

"but answer is in java script"... Angular runs in a JavaScript engine, so the answer can be used as is... did you have a specific problem with the answer? — Heretic Monkey, May 09 '19 at 18:20
I am not sure which popover they are using, their attribute for showing popover is different they prefix each property with 'data-' — Mohini Mhetre, May 10 '19 at 03:55
I have a solution with ngbootstrap will that be okay or do u need ngxbootstrap ? — Sourav Dutta, May 10 '19 at 18:19
I need to use ngxbootstrap as I am using our platform control which extends ngxbootstrap popover. Thank you :) — Mohini Mhetre, May 11 '19 at 05:53

score 1 · Accepted Answer · answered May 11 '19 at 06:10

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>

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

1 Answers1