element Plus 中el-tooltip 和 el-popover超出宽度，高度显示文字提示 否则不提示

说明：设置固定宽度。
文字超出宽度，用...显示。鼠标悬停到文字上，用el-tooltip显示全部文字内容
如果文字未超出宽度，el-tooltip、el-popover隐藏。

html:

<el-tooltip  :content="node.label" placement="bottom" effect="light" :disabled="isShowTooltip">
    <span class="treeLabel" @mouseenter="visibilityChange($event)"> {{ node.label }}</span>
 3 </el-tooltip>

<!--或者-->
<!--<el-popover :content="item.remark"  :width="320"  trigger="hover" placement="bottom" :disabled="isShowTooltip">
        <template #reference>
             <div class="remark"  @mouseenter="visibilityChange($event)">{{ item.remark }}</div>
        </template>
</el-popover>-->

js:

const isShowTooltip = ref(false)

// 是否显示tip 根据宽度
    function visibilityChange (event) {
        const ev = event.target
        const evWeight = ev.scrollWidth
        const contentWeight = ev.clientWidth
        if (evWeight > contentWeight) {
          // 实际宽度 > 可视宽度  文字溢出
          isShowTooltip.value = false
        } else {
          // 否则为不溢出
          isShowTooltip.value = true
        }
    }

// 是否显示tip 根据高度
     function visibilityChange (event) {
        const ev = event.target
        const evWeight = ev.scrollHeight
        const contentWeight = ev.clientHeight
      console.log(ev,evWeight,contentWeight)

        if (evWeight > contentWeight) {
          // 实际宽度 > 可视宽度  文字溢出
          isShowTooltip.value = false
        } else {
          // 否则为不溢出
          isShowTooltip.value = true
        }
    }

 

css:

.treeLabel ,.remark {
    white-space: nowrap;
    overflow: hidden;
     text-overflow: ellipsis;
}

https://www.jianshu.com/p/b39d2124d911