基于vue前端实现文字超出宽度出现tooltip 提示

需求场景：出现列表、表格或者导航栏等多组长度不一致的数据时，假设每一个都设计鼠标移动到文字上出现tooltip提示会使得用户体验不好，因此需要设计实现当文字超出宽度使用省略号显示并且鼠标移动到文字上出现tooltip提示。

<template>
  <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
    <el-tooltip
      class="item"
      effect="dark"
      placement="top"
      v-if="!isShowTooltip"
    >
      <span slot="content">{{content}}</span>
        <span
          style="cursor: pointer;"
          @mouseover="onMouseOver()"
          ref="overTooltip"
        >{{content}}</span>
    </el-tooltip>
    <span
      v-else
      @mouseover="onMouseOver()"
      ref="overTooltip"
    >{{content}}</span>
  </div>
</template>

<script>
export default {
  props: {
  /**
  显示的提示内容，父组件通过此属性传递参数
  */
    content: {
      default: null
    }
  },
  data () {
    return {
      isShowTooltip: true
    }
  },
  methods: {
    //内容超出，显示文字提示内容
    onMouseOver () {
      const tag = this.$refs['overTooltip']
      const parentWidth = tag.parentNode.offsetWidth // 获取元素父级可视宽度
      const contentWidth = tag.offsetWidth // 获取元素可视宽度
      //元素可视宽度小于父级元素可视宽度不显示文字提示
      this.isShowTooltip = contentWidth <= parentWidth

    }
  }

}
</script>