0

I have an implementation of hover(mouseenter), click, mouseleave, which shows and hide the popup modal component whenever the target element is hovered.

But the issue is the popup modal component opens a bit far away from the hovered element that is due to the top,left position I am giving.

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?

(And also the distance of the popup component varies when I hover over the element).

Maybe CSS :after can be a solution?

Minimum Reproducible example

https://stackblitz.com/edit/angular-34rr1t?file=src/app/app.component.html

TS file for handling opening and closing of popup modal

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;
}

HTML for handling opening and closing of popup modal

 <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)">
 </div>

 <fs-modal *ngIf="!modalShow"
           [ngStyle]="{'top.px': modalleft,
                       'left.px':modaltop ,
                       'position':'absolute'}"
           (onCloseModal)="closeModal('room')">
 </fs-modal>

HTML fs-modal

<div class="modal">
<div class="modal__body">
</div>
</div>

CSS fs-modal

.modal {
background: rgba(0, 0, 0, 0.5);
max-height: 100%;
overflow-y: scroll;
z-index: 9999999;   

&__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;
}
halfer
  • 19,824
  • 17
  • 99
  • 186
Enthu
  • 512
  • 2
  • 13
  • 38
  • 1
    I have updated the code with flag modalshow to show and hide , now can anyone please help me with positioning them modal right beside the mouse pointer , it would be a great help , thanks – Enthu Sep 03 '19 at 10:54
  • I also came across https://stackoverflow.com/questions/15702867/html-tooltip-position-relative-to-mouse-pointer , but how can I implement here in Angular – Enthu Sep 03 '19 at 14:47
  • When mouse enters from top of the element being hovered on the popup opens just near to the mouse pointer , whereas when mouse enters from bottom,left,right it appears as in the above posted image – Enthu Sep 03 '19 at 15:40

1 Answers1

1

There are multiple problems in your code:

  1. You're assigning left value of mouse position to top value of modal and top value of mouse position to left value of modal. You need to reverse that.
  2. mouseenter and mouseleave are fired only once, when pointer enters the DOM element and leaves it respectively. That's why your modal shows up in some corner as the values are for the event when the mouse pointer first entered or left.
  3. If you want a behaviour of the modal following your pointer, as mentioned in the link posted in the comments, you'll need the mousemove event

Your addClickEvent (I would name it handleEvent), needs to be like this:

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

Fork of your code, with these changes: https://stackblitz.com/edit/angular-zqeeqv?file=src/app/app.component.html

maazadeeb
  • 5,922
  • 2
  • 27
  • 40
  • One more help I needed how can bring the popup closer to the mousepointer and as soon as I go into the popup it close as I move out of the hovered element please suggest thanks – Enthu Sep 04 '19 at 06:26
  • In the demo code I've added 20px. You can make it as less as you like – maazadeeb Sep 04 '19 at 06:28