vue3实现超出文字鼠标滑过显示el-tooltip，不超出文字划过不显示el-tooltip

    <el-tooltip
      effect="dark"
      :visible="showTooltip"
      :content="nodeLabel"
      placement="top"
      :show-after="500"
    >
      <span
        ref="textContent"
        class="label"
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
        >{{ nodeLabel }}</span
      >
    </el-tooltip>

  .node .label {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  const textContent = ref(null)
  const tooltipEffect = ref(false)
  const showTooltip = ref(false)

  nextTick(() => {
    tooltipEffect.value = textContent.value.scrollWidth > textContent.value.clientWidth
  })

  const handleMouseEnter = () => {
    showTooltip.value = tooltipEffect.value
  }

  const handleMouseLeave = () => {
    showTooltip.value = false
  }