如何延迟ElementUI Tooltip组件的消失时间？

嘿，这个问题我之前做项目的时候也碰到过！ElementUI的Tooltip组件确实只提供了open-delay来控制提示框显示的延迟，但没直接给延迟消失的配置项。不过别担心，我们可以通过两种实用的方法来实现这个需求，下面给你详细说说：

方案一：基础版 - 仅离开触发元素时延迟消失 #

这种方法适合只需要在鼠标离开触发按钮/元素后，延迟一段时间再隐藏提示框的场景，通过Vue的定时器结合v-model手动控制Tooltip的显隐状态。

<template>
  <div>
    <el-tooltip
      v-model="tooltipVisible"
      content="这是延迟消失的提示内容"
      placement="top"
      :open-delay="500" <!-- 保留原有的显示延迟 -->
    >
      <button 
        @mouseleave="handleMouseLeave" 
        @mouseenter="handleMouseEnter"
      >
        悬停我查看提示
      </button>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tooltipVisible: false,
      hideTimer: null // 存储定时器ID，用于后续清除
    };
  },
  methods: {
    handleMouseEnter() {
      // 鼠标进入触发元素时，清除之前的隐藏定时器，避免误触发
      if (this.hideTimer) {
        clearTimeout(this.hideTimer);
        this.hideTimer = null;
      }
    },
    handleMouseLeave() {
      // 设置1000毫秒（1秒）的延迟后隐藏提示框
      this.hideTimer = setTimeout(() => {
        this.tooltipVisible = false;
      }, 1000);
    }
  },
  beforeUnmount() {
    // 组件销毁前务必清除定时器，防止内存泄漏
    if (this.hideTimer) {
      clearTimeout(this.hideTimer);
    }
  }
};
</script>

方案二：进阶版 - 支持鼠标移到提示框上保持显示 #

如果需要更友好的交互：鼠标移到提示框上时，提示框保持显示，只有当鼠标离开提示框后才延迟消失，这种方案需要监听Tooltip弹出层的鼠标事件。

<template>
  <div>
    <el-tooltip
      ref="tooltipRef"
      v-model="tooltipVisible"
      content="鼠标移到我上面也不会消失哦"
      placement="top"
      :open-delay="500"
    >
      <button 
        @mouseleave="handleTriggerLeave" 
        @mouseenter="handleTriggerEnter"
      >
        悬停我查看提示
      </button>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tooltipVisible: false,
      hideTimer: null,
      popperEl: null // 存储Tooltip弹出层的DOM元素
    };
  },
  mounted() {
    // 组件挂载后，获取Tooltip的弹出层元素
    this.popperEl = this.$refs.tooltipRef.popperElm;
    if (this.popperEl) {
      // 给弹出层添加鼠标进入/离开事件监听
      this.popperEl.addEventListener('mouseenter', this.handlePopperEnter);
      this.popperEl.addEventListener('mouseleave', this.handlePopperLeave);
    }
  },
  methods: {
    handleTriggerEnter() {
      // 进入触发元素时清除隐藏定时器
      this.clearHideTimer();
    },
    handleTriggerLeave() {
      // 离开触发元素时启动隐藏定时器
      this.startHideTimer();
    },
    handlePopperEnter() {
      // 鼠标移到提示框上时，清除隐藏定时器，保持显示
      this.clearHideTimer();
    },
    handlePopperLeave() {
      // 离开提示框时启动隐藏定时器
      this.startHideTimer();
    },
    clearHideTimer() {
      if (this.hideTimer) {
        clearTimeout(this.hideTimer);
        this.hideTimer = null;
      }
    },
    startHideTimer() {
      // 自定义延迟时间，这里设置为1000毫秒
      this.hideTimer = setTimeout(() => {
        this.tooltipVisible = false;
      }, 1000);
    }
  },
  beforeUnmount() {
    // 组件销毁前清理定时器和事件监听
    this.clearHideTimer();
    if (this.popperEl) {
      this.popperEl.removeEventListener('mouseenter', this.handlePopperEnter);
      this.popperEl.removeEventListener('mouseleave', this.handlePopperLeave);
    }
  }
};
</script>

注意事项 #

• 可以根据需求调整延迟时间，把代码中的1000改成你需要的毫秒数（比如500就是0.5秒）
• 无论哪种方案，都要在组件销毁时清除定时器和事件监听，避免内存泄漏
• 如果是Vue3项目，写法逻辑一致，只需要把生命周期钩子换成onMounted、onBeforeUnmount，ref的获取方式改成const tooltipRef = ref(null)即可

内容的提问来源于stack exchange，提问作者Jeason