title: To display modal component relative to the mouse pointer and correct positioning of modal component
body: <p>I have an implementation of hover(mouseenter), click, mouseleave, which shows and hide the popup modal component whenever the target element is hovered.</p>
  
  <p>But the issue is the popup modal component opens a bit far away from the hovered element that is due to the <code>top,left</code> position I am giving.</p>
  
  <p>How can I correctly position this modal component and is it possible to place the popup component just by the side of the mouse cursor instead of the popup being by the side of the hovered element?</p>
  
  <p>(And also the distance of the popup component varies when I hover over the element).</p>
  
  <p>Maybe CSS <code>:after</code> can be a solution?</p>
  
  <p><strong>Minimum Reproducible example</strong></p>
  
  <p><a href="https://stackblitz.com/edit/angular-34rr1t?file=src/app/app.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-34rr1t?file=src/app/app.component.html</a></p>
  
  <p>TS file for handling opening and closing of popup modal</p>
  
  <pre><code>modalShow = false;
  modalleft;
  modaltop;
  
  addClickEvent(e,name) {
  
  if (e.type === 'click') {
                      this.modalShow= true;
                      }
   else if (e.type === 'mouseenter') {
                          this.modalleft = e.clientX
                          this.modaltop = e.clientY
                          this.closeModal("room");
                          this.modalShow= true;
  
                      }
   else if (e.type === 'mouseleave') {
                          this.closeModal('room');
                          this.modalShow= false;
                      }             
  }
  
  closeModal(modalType: string) {
      this.modal[modalType].active = false;
  }
  </code></pre>
  
  <p>HTML for handling opening and closing of popup modal</p>
  
  <pre><code> &lt;div class="fs-heatmap-wrapper__content__box"
        *ngFor="let existingZone of floor.droppeditem"
        (mouseenter)="addClickEvent($event,floor.name)"
        (mouseleave)="addClickEvent($event,floor.name)"
        (click)="addClickEvent($event,floor.name)"&gt;
   &lt;/div&gt;
  
   &lt;fs-modal *ngIf="!modalShow"
             [ngStyle]="{'top.px': modalleft,
                         'left.px':modaltop ,
                         'position':'absolute'}"
             (onCloseModal)="closeModal('room')"&gt;
   &lt;/fs-modal&gt;
  </code></pre>
  
  <p>HTML fs-modal</p>
  
  <pre><code>&lt;div class="modal"&gt;
  &lt;div class="modal__body"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS fs-modal</p>
  
  <pre><code>.modal {
  background: rgba(0, 0, 0, 0.5);
  max-height: 100%;
  overflow-y: scroll;
  z-index: 9999999;   
  
  &amp;__body {
      pointer-events: all;
      padding: 50px;
      background: #ffffff;
      box-shadow: 4px 45px 23px -6px rgba(0, 0, 0, 0.4);
      margin: 2% 0;
      height: auto;
      *min-height: 1200px;
  }
  </code></pre>