Antd的Tooltip如何在文字不超出时不显示

Antd的Tooltip默认是鼠标放在内容上就会自动显示，现在想只有文字溢出省略时才显示Tooltip，要怎么做呢？很常见的一种方式是判断文字溢出然后通过visible属性去控制显隐，这里就需要声明一个标识状态去控制，如果有多个Tooltip那不是要声明多个状态？很麻烦！

这里推荐一种优雅的写法：

// 控制Tooltip显隐
function showToolTip(e) {
  if (e.target.clientWidth >= e.target.scrollWidth) {
    e.target.style.pointerEvents = "none"; // 阻止鼠标事件
  }
}

<Tooltip
  title={node.name}
  color="#fff"
  overlayInnerStyle={{ color: "#000" }}
  onMouseEnter={showToolTip}
>
  <span
    style={{
      display: "inline-block",
      width: "100%",
      overflow: "hidden",
      whiteSpace: "nowrap",
      textOverflow: "ellipsis",
      fontSize: "20px",
    }}
  >
    {node.name}
  </span>
</Tooltip>

这里结合onMouseEnter事件，在事件中判断内容宽≥内容滚动宽度就去掉鼠标事件。

怎么样？是不是很优雅！