Javascript 将工具提示元素保持在打开状态，直到工具提示悬停

我有一个长方体，一旦我们将鼠标悬停在长方体上，就会出现一个工具提示，当我进入工具提示内部时，工具提示将保持打开状态

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

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

此方案适用于左侧长方体，但不适用于右侧长方体

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

else if（e.type=='mouseleave'&&e.clientX

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

Stackblitz链接

导出类AppComponent{
modelStyle:any={
显示：“无”
};
modelClickedStyle:任何={
显示：“无”
};
modalStyleClikedFlag；
addClickEvent（e）{
设x=e.currentTarget.getBoundingClientRect（）；
如果（e.type==‘单击’）{
this.modalStyleClikedFlag=true；
this.modelClickedStyle={
顶部：0+‘px’，
左：0+‘px’，
高度：900+像素，
宽度：90+'%'，
显示：“块”
};
}
else if（e.type==='mouseenter'）{
this.modalStyleClikedFlag=false；
如果（（window.innerWidth | | document.documentElement.clientWidth）-x.right）>200）{
this.modelStyle={
顶部：0+‘px’，
左：x。右+px，
高度：screen.height+px，
宽度：65+'%'，
显示：“flex”
};
}否则{
this.modelStyle={
顶部：0+‘px’，
右：（（window.innerWidth | | document.documentElement.clientWidth）x.left）+“px”，
高度：screen.height+px，
宽度：65+'%'，
显示：“flex”
};
}
}
else if（e.type==='mouseleave'&&e.clientX

html

点击
点击

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

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

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.scss']
})
导出类AppComponent{
active=null；
modelStyle:any={
显示：“无”
};
modelClickedStyle:任何={
显示：“无”
};
modalStyleClikedFlag；
addClickEvent（e）{
设x=e.currentTarget.getBoundingClientRect（）；
如果（e.type==‘单击’）{
this.modalStyleClikedFlag=true；
this.modelClickedStyle={
顶部：0+‘px’，
左：0+‘px’，
高度：900+像素，
宽度：90+'%'，
显示：“块”
};
}
else if（e.type==='mouseenter'）{
this.modalStyleClikedFlag=false；
如果（（window.innerWidth | | document.documentElement.clientWidth）-x.right）>200）{
this.modelStyle={
顶部：0+‘px’，
左：x。右+px，
高度：screen.height+px，
宽度：65+'%'，
显示：“flex”
};
}否则{
this.modelStyle={
顶部：0+‘px’，
右：（（window.innerWidth | | document.documentElement.clientWidth）-x.left）-200+'px'，
高度：screen.height+px，
宽度：65+'%'，
显示：“flex”
};
}
}
else if（e.type==='mouseleave'&&e.clientX{
this.modelStyle={
显示：“无”
};
}, 1000)
}
}
onPopEvent（e）{
如果（e.type==='mouseenter'）{
如果（此.active）{
clearTimeout（this.active）；
}
}else if（e.type==='mouseleave'）{
this.modelStyle={
显示：“无”
};
}
}
}

---

StackBlitz供您参考

@joyBlanks，答案不在那篇文章中：）而且我已经编辑了StackBlitz链接，如果您能提供帮助，那将是非常好的，谢谢问题是，我在mouseleave中使用e.clientX<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>

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

}