Secondary encapsulation of el-tooltip, prompts can be automatically displayed after encapsulation

When the text is too long, use... to omit the text and display the complete prompt of the text.

Subassembly

Display the tag content passed by the user through slots in the template

<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>

When the mouse is hovering, the width of the element is compared. If it is exceeded, the el-tooltip is enabled. If it is not exceeded, the display tip is disabled. 

 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;
        }
      }
    }
  }

Extra long display...

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

Parent component call

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