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

最新推荐文章于 2025-01-15 15:35:23 发布

轩辕啸天

最新推荐文章于 2025-01-15 15:35:23 发布

阅读量2.9k

点赞数 3

文章标签： javascript ecmascript 前端 html5

本文链接：https://blog.csdn.net/qq_28565961/article/details/126399531

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>