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

Posted 2023-03-06

【中文标题】保持工具提示元素处于打开状态，直到时间工具提示悬停

【英文标题】：To keep tooltip element in opened state till the time tooltip is hovered

【发布时间】：2020-01-10 19:44:04

【问题描述】：

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

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

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

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

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>

【问题讨论】：

@joyBlanks，该帖子中没有答案 :) 而且我已经编辑了 stackblitz 链接，如果您能提供帮助，那就太好了，谢谢

问题是，我使用e.clientX

stackblitz.com/edit/angular-yw91du 这是你要找的吗？？

我认为是的，但您回答中唯一的问题是，如果我开箱即用，工具提示不会消失，我希望右框与我的 stackblitz 链接中的左框相同

好的，你也给出了 settiimeout，我认为这是正确的 :)，谢谢，请发布答案，我会接受 :)

【参考方案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

【讨论】：

这是我为您指出的正确方向。您必须找出最适合您的用户的方法。

这是因为您的边框不正确检查更新的 SB angular-yw91du.stackblitz.io

它会在一秒钟内关闭。由于工具提示相距一定距离，鼠标离开会关闭工具提示。左边的因为工具提示和左边的框几乎在一起

让我们continue this discussion in chat.