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