文字过长鼠标悬浮显示

1、封装组件（以el-tooltip为例）

<!--
 * @Author: kongjingchao
 * @Date: 2023-08-03 18:48:45
 * @Last Modified by: kongjingchao
 * @Last Modified time: 2023-08-23 16:17:40
 * @Description: 文字过长提示工具
 * @Copyright (c) 2021 CFCA[http://www.cfca.com.cn] All rights reserved.
-->

<template>
  <div class="text-tooltip">
    <el-tooltip
      class="item"
      effect="dark"
      :disabled="isShowTooltip"
      :content="content"
      :placement="placement"
    >
      <div class="over-flow" :style="{ width }" @mouseover="onMouseOver(refName)">
        <span :ref="refName">{{ content || '-' }}</span>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'textTooltip',
  props: {
  	// 位置
    placement: {
      type: String,
      default: 'top-start',
    },
    // 显示的文字内容
    content: {
      type: String,
      required: true,
    },
    // 设置文字显示的宽度
    width: {
      type: String,
    },
    // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
    refName: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      isShowTooltip: true,
    };
  },
  methods: {
    onMouseOver(str) {
      const parentWidth = this.$refs[str].parentNode.offsetWidth;
      const contentWidth = this.$refs[str].offsetWidth;
      // 判断是否开启tooltip功能
      if (contentWidth > parentWidth) {
        this.isShowTooltip = false;
      } else {
        this.isShowTooltip = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.over-flow {
  overflow: hidden; //
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

2、使用

<LongTextTip
   content="dwadadawwdaawdawad"
   width="100px"
   refName="name"
/>

最终效果如下