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

最新推荐文章于 2024-06-26 14:49:56 发布

原创最新推荐文章于 2024-06-26 14:49:56 发布 · 3.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ecmascript #前端 #html5

博客介绍了如何优雅地控制Antd的Tooltip组件，使其在文字内容溢出时才显示。通过监听onMouseEnter事件，判断内容宽度是否大于滚动宽度来控制Tooltip的显隐，避免了为每个Tooltip声明单独的状态，简化了代码维护。这种方法提供了一种简洁的解决方式，适用于需要动态控制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>