element-ui使用el-tooltip文本超出时，tooltip文字提示，否则不提示

如果你遇到了vue项目element使用el-tooltip时，超出时显示tooltip提示，不超出内容则不显示，请看下面教程。

超出时会显示…，鼠标悬浮出现提示内容，没有超出时，鼠标悬浮不会显示，请看图

直接上代码

<el-tooltip
  :content="str"
   :disabled="isShowTooltip"
   effect="dark"
   placement="top"
 >
   <div
     @mouseover="onMouseOver(str)"//鼠标移入事件
     style="overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;"
   >
     <span :ref="str">{{`${str}`}}</span>
   </div>
 </el-tooltip>
// str 是你显示的内容

data中：

data () {
    return {
      isShowTooltip: false
   }
}

methods中：

methods: {
  onMouseOver (str) { // 内容超出，显示文字提示内容
      const tag = this.$refs[str]
      const parentWidth = tag.parentNode.offsetWidth // 获取元素父级可视宽度
      const contentWidth = tag.offsetWidth // 获取元素可视宽度
      this.isShowTooltip = contentWidth <= parentWidth

  }
}