I have implemented click and hover functionaly over an element , from presvious answer I had tackled the popup position relative to mousepointer.
But now I want to fix the popup modal position when hovered on say vertically middle by the side wrt the hovered element.

Issue when I hover on the element the popup modal starts flickering and when I click in some other place within the element somehow then the modal opens up finally.

Onclick

To show the popup modal in full screen when clicked on(this thing works but not in the correct way,flickering thing) + when popup modal being hovered it should be kept open.
Once the popup modal is opened the popup modal can only be closed once click happens anywhere outside of the modal

OnHover

To show the popup modal fixed vertically centre by the side wrt the hovered element(this thing as well works but positioning is not correct) + when popup modal being hovered it should be kept opened.
In this case as soon as the mouse leaves from the element or from the popup modal , the popup modal should close.

Minimum Reproducible Example

/app/appponent.html

appponent.html

<div class="box"
  (mouseenter)="addClickEvent($event)"
  (mouseleave)="addClickEvent($event)"
  (mousemove)="addClickEvent($event)"
  (click)="addClickEvent($event)">
</div>

<fs-modal *ngIf="modalShow"
           [ngStyle]="{'top.px': (zoneIsClicked ? 0 : modaltop) ,
                   'left.px':(zoneIsClicked ? 0 : modalleft)}"
           [ngClass]="zoneIsClicked ? 'zoneClicked' : 'zoneNotClicked'">
</fs-modal>

appponent

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.scss']
})
export class AppComponent {
name = 'Angular';

modalShow = false;
modalleft;
modaltop;
zoneIsClicked;

addClickEvent(e) {
 if(e.type === 'click'){
  this.modalShow = true;
  this.zoneIsClicked = true;
 }
/*else if (e.type === 'mousemove') {
  this.modalleft = e.clientX
  this.modaltop = e.clientY
}*/
else if (e.type === 'mouseenter') {
  this.modalShow = true;
  this.zoneIsClicked = false;
  this.modalleft = e.clientX
  this.modaltop = e.clientY
}
else if (e.type === 'mouseleave') {
  this.modalShow = false;
}
}

}

appponent.css

.box{
width: 100px;       
height: 100px;      
background: rgba(254, 249, 247, 1);     
border: 1.5px solid #e24301;        
margin: 50px;       
font-size: 0.8rem;
position: absolute; 
}

.zoneClicked{
 display: block;
 position: absolute;
 width: 900px;
}

.zoneNotClicked{
position: absolute;
width: 50%;
}

fsmodalponent

import { Component, Input } from '@angular/core';

@Component({
  selector: 'fs-modal',
  template: `<div [ngStyle]="{'border':'1px solid black'}">ok</div>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class fsModalComponent  {
}

I have implemented click and hover functionaly over an element , from presvious answer I had tackled the popup position relative to mousepointer.
But now I want to fix the popup modal position when hovered on say vertically middle by the side wrt the hovered element.

Issue when I hover on the element the popup modal starts flickering and when I click in some other place within the element somehow then the modal opens up finally.

Onclick

To show the popup modal in full screen when clicked on(this thing works but not in the correct way,flickering thing) + when popup modal being hovered it should be kept open.
Once the popup modal is opened the popup modal can only be closed once click happens anywhere outside of the modal

OnHover

To show the popup modal fixed vertically centre by the side wrt the hovered element(this thing as well works but positioning is not correct) + when popup modal being hovered it should be kept opened.
In this case as soon as the mouse leaves from the element or from the popup modal , the popup modal should close.

Minimum Reproducible Example

https://stackblitz./edit/angular-yybbgm?file=src/app/app.ponent.html

app.ponent.html

<div class="box"
  (mouseenter)="addClickEvent($event)"
  (mouseleave)="addClickEvent($event)"
  (mousemove)="addClickEvent($event)"
  (click)="addClickEvent($event)">
</div>

<fs-modal *ngIf="modalShow"
           [ngStyle]="{'top.px': (zoneIsClicked ? 0 : modaltop) ,
                   'left.px':(zoneIsClicked ? 0 : modalleft)}"
           [ngClass]="zoneIsClicked ? 'zoneClicked' : 'zoneNotClicked'">
</fs-modal>

app.ponent

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.scss']
})
export class AppComponent {
name = 'Angular';

modalShow = false;
modalleft;
modaltop;
zoneIsClicked;

addClickEvent(e) {
 if(e.type === 'click'){
  this.modalShow = true;
  this.zoneIsClicked = true;
 }
/*else if (e.type === 'mousemove') {
  this.modalleft = e.clientX
  this.modaltop = e.clientY
}*/
else if (e.type === 'mouseenter') {
  this.modalShow = true;
  this.zoneIsClicked = false;
  this.modalleft = e.clientX
  this.modaltop = e.clientY
}
else if (e.type === 'mouseleave') {
  this.modalShow = false;
}
}

}

app.ponent.css

.box{
width: 100px;       
height: 100px;      
background: rgba(254, 249, 247, 1);     
border: 1.5px solid #e24301;        
margin: 50px;       
font-size: 0.8rem;
position: absolute; 
}

.zoneClicked{
 display: block;
 position: absolute;
 width: 900px;
}

.zoneNotClicked{
position: absolute;
width: 50%;
}

fsmodal.ponent

import { Component, Input } from '@angular/core';

@Component({
  selector: 'fs-modal',
  template: `<div [ngStyle]="{'border':'1px solid black'}">ok</div>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class fsModalComponent  {
}

• javascript
• html
• css
• angular
• mouseevent

• you want to place it in vertically center of the box when you click. right? – Deepu Reghunath Commented Sep 4, 2019 at 16:18
• @DeepuReghunath , yes , just on the right side of the box , thanks – Enthu Commented Sep 4, 2019 at 16:50
• hi , it is not correctly positioned if I have more than one boxes then it is not positioned on the right side of the box as for the single box , please suggest – Enthu Commented Sep 5, 2019 at 4:37
• what is the expected behavior? like, on hover, the popup needs to open and when the mouse moves off, the pop-up disappears? – Nidhin Joseph Commented Sep 5, 2019 at 4:48
• Yeah this link it is working but positioning is not in a dynamic way stackblitz./edit/angular-emrzkv?file=src/app/… , link by @DeepuReghunath – Enthu Commented Sep 5, 2019 at 4:49

2 Answers 2

Make some changes in your ts file. Remove the mousemove event for the box and handle the mouseleave event of box div

https://stackblitz./edit/angular-rkve7b?file=src/app/app.ponent.ts

You can use the getBoundingClientRect() to find exact position of the hovered element and set those values to your popup. Please find the demo below.

StackBlitz Demo