对el-tooltip二次封装，封装后可自动显示提示

文字过长时对文字使用...省略，并显示文字的完整提示

子组件

在模板中通过插槽来展示用户传入的标签内容

<template>
    <el-tooltip class="item" effect="dark" :disabled="isShowTooltip" :content="content" placement="top">
      <div ref="aotoTooltip" class="ellipsis" :style="`width:${width}`" @mouseover="mouseHover">
        <slot></slot>
      </div>
    </el-tooltip>
  </template>

鼠标悬浮时对元素宽度进行比对，如果超出则开启el-tooltip，如果未超出则禁用显示提示 

 export default {
    name: 'AutoTooltip',
    props: {
      // 提示内容
      content: {
        type: String,
        default: () => {
          return ''
        }
      },
      // 超出多少宽度后开始文字提示
      width: {
        type: String,
        default: () => {
          return ''
        }
      },
    },
    data() {
      return {
        isShowTooltip: true
      }
    },
    methods: {
      /**
       * 鼠标悬浮是获取内外侧的宽度
       */
      mouseHover() {
        let outer = this.$refs.aotoTooltip.offsetWidth;
        let inner = this.$refs.aotoTooltip.childNodes[0].offsetWidth;
        // 判断内存宽度是否大于外层宽度如果是则开启提示如果否则关闭提示
        if (inner>outer) {
          this.isShowTooltip = false;
        } else {
          this.isShowTooltip = true;
        }
      }
    }
  }

超长显示...

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

父组件调用

<template>
    <auto-tooltip :content="tipText"
        width="200px">
        <span>{
   
   {tipText}}</span>
    </auto-tooltip>
</template>