title: Show one Popover on mouseenter event at a time (Angular, ngBootstrap)
body: <p>I have dynamically generated divs. On those divs, i have ngPopovers. Inside ngPopover, i have button and i want to click on button button. So i have triggered ng popover like this <code>triggers="mouseenter"</code>.</p>
  
  <p>Here is code for view</p>
  
  <pre><code> &lt;div [ngbPopover]="popContent"  class="btn mr-2 btn-outline-secondary" 
   ngbPopover="&lt;button&gt;Hello&lt;/button&gt;" triggers="mouseenter"  &gt;
       Hover over me!
   &lt;/div&gt;
  
  
   &lt;div [ngbPopover]="popContent" class="btn mr-2 btn-outline-secondary"           
   ngbPopover="You see, I show up on hover!" triggers="mouseenter"  
   (click)="$event.stopPropagation()" &gt;
   Hover over me!
    &lt;/div&gt;
  
   &lt;div [ngbPopover]="popContent" class="btn btn-outline-secondary" 
   ngbPopover="You see, I show up on hover!" triggers="mouseenter"&gt;
   Hover over me!
   &lt;/div&gt;
  
  
  &lt;ng-template #popContent&gt;
  &lt;div&gt;
      &lt;button&gt; Cancel &lt;/button&gt;
  &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>Now popover is visible, but if i hover on another div(Div other than the popover container), the previous popover should be hidden and new popover should be visible if i hover any other div containing the popover.</p>
  
  <p>Please tell me, how can show one popover at a time. 
  Here is a working fiddle/stack blitz
  <a href="https://stackblitz.com/edit/angular-d4dgz1?file=app/popover-triggers.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-d4dgz1?file=app/popover-triggers.html</a></p>