import { getStyle } from 'element-plus/lib/utils/dom/index';
const showTip = {
  created(el, binding, vnode) {
    let tooltipNode = vnode.children.find((childCmpt) => childCmpt.component?.type.name == 'ElTooltip');
    if (tooltipNode) {
      // let { content } = tooltipNode.props;
      el.addEventListener('mouseenter', () => {
        tooltipNode.component.props.disabled = true;
        const range = document.createRange();
        range.setStart(el, 0);
        range.setEnd(el, el.childNodes.length);
        const rangeWidth = Math.round(range.getBoundingClientRect().width);
        const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0);
        if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {
          tooltipNode.component.props.disabled = false;
        }
      });
    }
  }
};
export default showTip;

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import showTip from './directives/showTip.js';
const app = createApp(App);
app.directive('show-tip', showTip);
app.use(ElementPlus).mount('#app');

<template>
  <div class="test-wrapper">
    <div class="test-value" v-show-tip>
    <el-tooltip placement="top" :content="name">{{name}}</el-tooltip>
    </div>
  </div>
</template>
<script setup>
const name = '这是一段一段一段一段一段非常非常非常非常长长的文本';
</script>
<style scoped>
.test-value {
  width: 20%;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>