CODEWITHSUNDEEP
angularng-bootstrap
Sajid Manzoor
Sajid Manzoor

Reputation: 1428

Show one Popover on mouseenter event at a time (Angular, ngBootstrap)

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 triggers="mouseenter".

Here is code for view

 <div [ngbPopover]="popContent"  class="btn mr-2 btn-outline-secondary" 
 ngbPopover="<button>Hello</button>" triggers="mouseenter"  >
     Hover over me!
 </div>


 <div [ngbPopover]="popContent" class="btn mr-2 btn-outline-secondary"           
 ngbPopover="You see, I show up on hover!" triggers="mouseenter"  
 (click)="$event.stopPropagation()" >
 Hover over me!
  </div>

 <div [ngbPopover]="popContent" class="btn btn-outline-secondary" 
 ngbPopover="You see, I show up on hover!" triggers="mouseenter">
 Hover over me!
 </div>


<ng-template #popContent>
<div>
    <button> Cancel </button>
</div>
</ng-template>

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.

Please tell me, how can show one popover at a time. Here is a working fiddle/stack blitz https://stackblitz.com/edit/angular-d4dgz1?file=app/popover-triggers.html

Upvotes: 0

Views: 2999

Answers (2)

Chellappan வ
Chellappan வ

Reputation: 27439

Use HostListner to listen mousleave event on document then use @ViewChild Decorator to get the Element ref 

 @HostListener('mouseleave',['$event']) onHoverOutside(){
   this.ref.close();
  }

Check the Example:https://stackblitz.com/edit/angular-d4dgz1-3w7f3p

Upvotes: 2

Vinod Bhavnani
Vinod Bhavnani

Reputation: 2225

You have to mention mouseleave as well. Like this:

<div [ngbPopover]="popContent"  class="btn mr-2 btn-outline-secondary" 
 ngbPopover="<button>Hello</button>" triggers="mouseenter:mouseleave"  >
     Hover over me!
 </div>


 <div [ngbPopover]="popContent" class="btn mr-2 btn-outline-secondary"           
 ngbPopover="You see, I show up on hover!" triggers="mouseenter:mouseleave"  
 (click)="$event.stopPropagation()" >
 Hover over me!
  </div>

 <div [ngbPopover]="popContent" class="btn btn-outline-secondary" 
 ngbPopover="You see, I show up on hover!" triggers="mouseenter:mouseleave">
 Hover over me!
 </div>


<ng-template #popContent>
<div>
    <button> Cancel </button>
</div>
</ng-template>

Upvotes: 2

Related Questions