el-table配置show-overflow-tooltip属性后，如果文字超长页面就会抖动

问题概述

1、触发场景：el-table 配置 show-overflow-tooltip="true"，当单元格文字超长（触发 text-overflow）时。

2、具体现象：

• 鼠标 hover 超长文本单元格，tooltip 反复显示 / 隐藏，不展示或闪跳（抖动）。

• 最终 tooltip 无法稳定展示，甚至完全不弹出。

• 附图

问题原因分析

1、源码关键逻辑拆解（el-table 内置 tooltip 触发机制）

// 1. 鼠标进入单元格（mouseenter）触发逻辑
handleCellMouseEnter(event, row) {
  // 步骤1：判断单元格是否存在 text-overflow（通过 rangeWidth+padding 或 scrollWidth 对比 offsetWidth）
  const cellChild = event.target.querySelector('.cell');
  if (!(hasClass(cellChild, 'pc-tooltip') && cellChild.childNodes.length)) return;
  
  // 步骤2：若文字超长，渲染 tooltip 内容并激活显示
  if (/* 超长判断成立 */ && this.$refs.tooltip) {
    this.tooltipContent = cell.innerText || cell.textContent; // 赋值会触发表格重渲染（源码 TODO 标注待优化）
    tooltip.referenceElm = cell; // 绑定 tooltip 参考元素为当前单元格
    tooltip.activateTooltip(tooltip); // 显示 tooltip
  }
}

// 2. 鼠标离开单元格（mouseleave）触发逻辑
handleCellMouseLeave(event) {
  // 步骤：若 tooltip 存在，直接关闭 tooltip
  const tooltip = this.$refs.tooltip;
  if (tooltip) {
    tooltip.setExpectedState(false);
    tooltip.handleClosePopper(); // 隐藏 tooltip
  }
}

2、循环触发逻辑（不展示或抖动根源）

1. 触发 mouseenter → 显示 tooltip。

2. tooltip 弹出后 覆盖了原单元格（默认定位可能与单元格重叠） → 触发 mouseleave → 关闭 tooltip。

3. tooltip 关闭后，鼠标重新回到单元格 → 再次触发 mouseenter → 重复步骤 1-2，形成无限循环。

4. 最终表现：tooltip 不展示或闪跳（抖动），无法稳定停留。

解决方法

1. 替换为 Element UI 原生 Tooltip 组件（推荐）