vue+elementUI的Tooltip组件显隐可控

1、使用自定义组件ExTooltip

<template>
  <div class='wrapper'>
    <div>
      <ExTooltip
        :value="overflowData"
        :contentClass="['content']"
      ></ExTooltip>
    </div>
    <div>
      <ExTooltip
        :value="normalData"
        :contentClass="['content']"
      ></ExTooltip>
    </div>
  </div>
</template>

<script>
import ExTooltip from '@/components/ExTooltip'
export default {
  components: {
    ExTooltip
  },
  name: 'exTooltip',
  data() {
    return {
      overflowData: '超长的',
      normalData: '正常'
    }
  }
}
</script>
<style lang='less' scoped>
.wrapper {
  /deep/.content {
    width: 24px;
    font-size: 12px;
    margin-left: 10px;
    padding: 10px;
  }
}
</style>

2、改造elementUI的Tooltip组件

<template>
  <div>
    <div
      class="ex-tooltip-input-hidden"
      :class="contentClass"
    >{{value}}</div>
    <div
      v-if="flag"
      @mouseenter="visibilityChange($event)"
      class="ellipsis"
      :class="contentClass"
    >{{value || ''}}</div>
    <el-tooltip
      placement="top"
      :content="value"
      v-else
    >
      <div
        class="ellipsis"
        @mouseenter="visibilityChange($event)"
        :class="contentClass"
      >{{value || ''}}</div>
    </el-tooltip>
  </div>
</template>

<script>

export default {
  props: {
    value: {
      required: true
    },
    contentClass: {
      type: Array
    }
  },
  data() {
    return {
      flag: true
    }
  },
  methods: {
    visibilityChange(event) {
      let ev = event.target
      let thisWidth = ev.offsetWidth
      let wordWidth = ev.previousElementSibling.offsetWidth
      this.flag = thisWidth >= wordWidth
    }
  }
}
</script>
<style lang='less' scoped>
.ex-tooltip-input-hidden {
  position: fixed !important;
  left: -19800px !important;
  width: auto !important;
}
/*显示省略号*/
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

参考：https://blog.csdn.net/zhengvipin/article/details/85615216