用自定义指令实现按需显示Tooltip：一、精准判断溢出（单行比scrollWidth/clientWidth，多行比scrollHeight/clientHeight）；二、指令封装（自动设省略样式、动态创建Tooltip、ResizeObserver监听、WeakMap管理实例）；三、UI优化（位置微调、宽度限制、延迟显隐、主题适配）；四、表格场景特别处理（自动识别td宽度、避免滚动卡顿）。
用自定义指令实现文本溢出时自动显示 Tooltip，核心不是“加一个提示”，而是“只在该出现时才出现”——不渲染、不监听、不卡顿，真正按需响应。下面从实用角度拆解关键步骤和 UI 细节优化点。
一、精准判断是否真的溢出
光靠
不代表内容被截断，必须用 DOM 属性实测：
单行场景
：比较
（注意要等元素渲染完成，可用
或
）
多行场景
：使用
后，检测
规避误判
：确保元素已应用
和
等样式后再检测，否则
可能不准
二、指令封装：轻量、可复用、无副作用
避免每个地方都写
+
，用指令统一接管：
挂载时自动设置省略样式（
或多行 clamp），并立即检测溢出
仅当溢出为真，才动态创建
并渲染到临时容器，再替换原 DOM 节点（保留原始 class/style/data-v-*）
用
替代
，更精准监听尺寸变化，且不触发全局重排
用
存储每个元素的 tooltip 实例，卸载时自动清理，防止内存泄漏
三、UI细节优化：让提示更自然、更可控
默认 Tooltip 容易“突兀”，这几个细节提升体验：
位置微调
：设置
并配合
，让提示框紧贴文字上方左对齐，避免悬空
宽度限制
：给
的
加 CSS，如
，防长链接撑爆屏幕
延迟与消失逻辑
：开启
避免手滑误触；移出后
保持短暂可见，提升操作容错
字体与背景协调
：通过
或自定义
匹配主色调，比如深色主题下设
四、表格等高频场景特别处理
在
中直接套指令，比每个
写一遍
更干净：
指令内自动识别父级
宽度约束，无需手动传 width
对
列或带
的列，检测前先
获取真实可用宽度
避免滚动卡顿：不依赖
控制显隐，而是指令内部控制 tooltip 实例的 mount/unmount，减少 VNode 开销
text-overflow: ellipsisel.scrollWidth > el.clientWidthnextTickrequestAnimationFrame-webkit-line-clampel.scrollHeight > el.clientHeightoverflow: hiddendisplay: -webkit-boxscrollHeightel-tooltip:disabledwhiteSpace: 'nowrap'ElTooltipResizeObserverwindow.resizeWeakMapplacement="top-start"offset="5"el-tooltippopper-classmax-width: 320px; word-break: break-word;show-after="300"hide-after="100"effect="light"popper-stylebackground: #2a2e37; color: #e6e6e6;el-tablescoped-slotel-tooltiptdfixedmin-widthgetComputedStyle(el).widthv-if