在 Vue 3 中使用 Element Plus 的 el-tooltip 组件时，如果你希望在超出文本时显示提示，而在文本未超出时不显示，

实现 el-tooltip 动态显示隐藏
为了实现在文本超出容器宽度时才显示 tooltip，而在未超出的情况下不显示的效果，在 Vue 3 和 Element Plus 中可以通过结合自定义指令和样式检测来完成这一功能。
自定义 Directive 方案
创建一个全局或局部的自定义 directive 来监听目标元素的内容变化以及尺寸改变事件。当这些条件发生变化时，检查内容是否溢出了其父级容器，并相应地更新 el-tooltip 的可见状态。
// 定义 custom-directive.js 文件用于处理 overflow 检测逻辑
import { nextTick } from 'vue';

const checkOverflow = (el) => {
const rect = el.getBoundingClientRect();
return !!(rect.width < el.scrollWidth || rect.height < el.scrollHeight);
};

export default {
mounted(el, binding) {
let isOverflowing;

const updateTooltipVisibility = () => {
isOverflowing = checkOverflow(el);

if (isOverflowing &amp;&amp; !binding.value.visible) {
// 显示 tooltip
binding.instance.$refs[binding.arg].handleShowPopper();
binding.value.visible = true;
} else if (!isOverflowing &amp;&amp; binding.value.visible) {
// 隐藏 tooltip
binding.instance.$refs[binding.arg].handleHidePopper();
binding.value.visible = false;
}
};

// 初始化时调用一次
nextTick(() => {
updateTooltipVisibility();

// 添加 resize observer 或 mutation observer 监听 DOM 变化
new ResizeObserver((entries) => {
entries.forEach(entry => entry.target === el &amp;&amp; updateTooltipVisibility());
}).observe(el);
});
},
};
登录后复制
在组件内部注册并应用此 directive：
<template>
<!-- 使用 v-overflow-tip 自定义指令 -->
<div class="text-container">
<el-tooltip ref="myTooltipRef" effect="dark" placement="top-start">
<template #content>{{ longText }}</template>
<span v-overflow-tip="{ visible: toolTipVisible }">{{ truncatedText }}</span>
</el-tooltip>
</div>
</template>

<script setup lang="ts">
import useCustomDirective from './custom-directive';
import { ref } from 'vue';

defineOptions({
directives: {
'overflow-tip': useCustomDirective,
},
});

let longText = ref('这是一个非常长的文字串...');
let truncatedText = ref('这是被截断后的短字符串');
let toolTipVisible = ref(false); // 初始状态下假设无溢出
</script>

<style scoped>
.text-container span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
登录后复制
上述代码片段展示了如何通过自定义 directive 结合 ResizeObserver API[^1] 来监控元素大小的变化，并据此调整 el-tooltip 是否应该呈现给用户。
对于表格中的列数据展示，可以直接利用 Element Plus 提供的 show-overflow-tooltip 属性简化操作[^4]。