普通文本el-tootip超出宽度自动显示省略号，悬停显示

在el-table中只要加 show-overflow-tooltip <el-table-column show-overflow-tooltip>就可以实现，那普通文本呢？官方并没有给出，就自己了封装一个

<template>
  <!-- 使用方法 -->
  <div class="text-box">
    <tooltip-over :content="tipText" refName="tooltipOver"></tooltip-over>
  </div>
</template>

<script>
import tooltipOver from '@/components/tooltipOver'
export default {
  data() {
    return{
      tipText: '一大段文本'
    }
  },
  components: {
    tooltipOver
  }
};
</script>

<style>
.text-box{
  height: 100%;
  /* 宽度100%自适应，也可以设置固定长度 */
  width: 100%; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

import tooltipOver from './components/tooltipOver'

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

<script>
  export default {
    name: 'textTooltip',
    props: {
      // 显示的文字内容
      content: {
        type: String,
        default: () => {
          return ''
        }
      },
      refName: {
        type: String,
        default: () => {
          return ''
        }
      }
    },
    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 scoped>
.over-flow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>