如果你遇到了vue项目element使用el-tooltip时，超出时显示tooltip提示，不超出内容则不显示，请看下面教程。
超出时会显示…，鼠标悬浮出现提示内容，没有超出时，鼠标悬浮不会显示，请看图文章来源：https://www.toymoban.com/news/detail-514218.html
文章来源地址https://www.toymoban.com/news/detail-514218.html
直接上代码
<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
}
}
到了这里，关于element-ui使用el-tooltip文本超出时，tooltip文字提示，否则不提示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
