[JavaScript知识库] element-ui使用el-tooltip文本超出时，tooltip文字提示，否则不提示

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> element-ui使用el-tooltip文本超出时，tooltip文字提示，否则不提示 -> 正文阅读

[JavaScript知识库]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

  }
}