保持工具提示元素处于打开状态，直到时间工具提示悬停

Question

我有一个盒子，一旦我们将鼠标悬停在盒子上，就会出现一个工具提示，当我进入工具提示时，工具提示仍然打开。

对于左侧的框，工具提示将向其右侧打开。

对于右侧的框，工具提示将向其左侧打开。

此方案适用于左侧框，但不适用于右侧框。

else if (e.type === 'mouseleave' && e.clientX < x.right) {
 this.modelStyle = {
   display: 'none'
  };
 }

为了处理右侧框的工具提示悬停功能，应对鼠标离开功能进行哪些更改，与处理左侧框工具提示的行为相同。

Stackblitz 链接

https://stackblitz.com/edit/angular-obzqsk?file=src/app/app.component.ts

export class AppComponent {

modelStyle: any = {
  display: 'none'
};
modelClickedStyle: any = {
  display: 'none'
};
modalStyleClikedFlag;

addClickEvent(e) {
 let x = e.currentTarget.getBoundingClientRect();
if (e.type === 'click') {
  this.modalStyleClikedFlag = true;
  this.modelClickedStyle = {
    top: 0 + 'px',
    left: 0 + 'px',
    height: 900 + 'px',
    width: 90 + '%',
    display: 'block'
   };
  }
else if (e.type === 'mouseenter') {
  this.modalStyleClikedFlag = false;
  if(((window.innerWidth || document.documentElement.clientWidth) - x.right) >200 ){
    this.modelStyle = {
       top: 0 + 'px',
       left: x.right + 'px',
       height: screen.height + 'px',                          
       width: 65 +'%',
       display: 'flex'
                       };
   }else{
     this.modelStyle = {
      top: 0 + 'px',
      right:((window.innerWidth || document.documentElement.clientWidth) x.left) + 'px',
      height: screen.height + 'px',                                   
      width: 65 +'%',
      display: 'flex'
        };
     }
}
else if (e.type === 'mouseleave' && e.clientX < x.right) {
  this.modelStyle = {
    display: 'none'
  };
}
}

onPopEvent() {
  this.modelStyle = {
  display: 'none'
};
}

}

html

<div class="box1" (mouseenter)="addClickEvent($event)" 
 (mouseleave)="addClickEvent($event)" (click)="addClickEvent($event)">
 On click
</div>

<div class="box2" (mouseenter)="addClickEvent($event)" 
 (mouseleave)="addClickEvent($event)" (click)="addClickEvent($event)">
 On click
</div>


<fs-modal [ngStyle]="modalStyleClikedFlag ? modelClickedStyle :modelStyle" 
 (mouseleave)="onPopEvent($event)">
</fs-modal>

Answer 1

添加一个超时，然后如果用户打算输入该框，它将打开

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  active = null;
  modelStyle: any = {
    display: 'none'
  };
  modelClickedStyle: any = {
    display: 'none'
  };
  modalStyleClikedFlag;

  addClickEvent(e) {
    let x = e.currentTarget.getBoundingClientRect();
    if (e.type === 'click') {
      this.modalStyleClikedFlag = true;
      this.modelClickedStyle = {
        top: 0 + 'px',
        left: 0 + 'px',
        height: 900 + 'px',
        width: 90 + '%',
        display: 'block'
      };
    }
    else if (e.type === 'mouseenter') {
      this.modalStyleClikedFlag = false;
      if (((window.innerWidth || document.documentElement.clientWidth) - x.right) > 200) {
        this.modelStyle = {
          top: 0 + 'px',
          left: x.right + 'px',
          height: screen.height + 'px',
          width: 65 + '%',
          display: 'flex'
        };
      } else {
        this.modelStyle = {
          top: 0 + 'px',
          right: ((window.innerWidth || document.documentElement.clientWidth) - x.left) - 200 + 'px',
          height: screen.height + 'px',
          width: 65 + '%',
          display: 'flex'
        };

      }
    }
    else if (e.type === 'mouseleave' && e.clientX < x.right) {
      if (this.active) {
        clearTimeout(this.active);
      }
      this.active = setTimeout(() => {
        this.modelStyle = {
          display: 'none'
        };
      }, 1000)
    }
  }

  onPopEvent(e) {
    if (e.type === 'mouseenter') {
      if (this.active) {
        clearTimeout(this.active);
      }
    } else if (e.type === 'mouseleave') {
      this.modelStyle = {
        display: 'none'
      };
    }
  }

}

StackBlitz 供您参考https://stackblitz.com/edit/angular-yw91du