如何实现Ant Design Tooltip仅在Paragraph出现省略时显示？

这个需求确实挺常见的，Ant Design本身没有直接提供判断文本是否触发ellipsis的API，但我们可以通过DOM元素的原生属性来实现这个逻辑——核心就是判断文本容器的实际内容宽度/高度是否超过了容器的显示尺寸，再据此控制Tooltip的显示状态。

下面分两种情况（单行/多行省略）给你具体的实现方案：

单行省略的实现 #

先看单行场景的完整代码，我封装成了一个可复用的组件：

import { useState, useRef, useEffect } from 'react';
import { Tooltip, Paragraph } from 'antd';

const EllipsisTooltipParagraph = ({ text }) => {
  // 获取Paragraph的DOM引用
  const paragraphRef = useRef(null);
  // 控制Tooltip是否显示的状态
  const [showTooltip, setShowTooltip] = useState(false);

  // 判断文本是否被截断的核心函数
  const checkIsEllipsis = () => {
    const element = paragraphRef.current;
    if (!element) return false;
    // 单行截断判断：内容实际宽度 > 容器显示宽度
    return element.scrollWidth > element.clientWidth;
  };

  useEffect(() => {
    // 初始加载时判断一次
    setShowTooltip(checkIsEllipsis());

    // 监听窗口 resize，防止容器尺寸变化导致截断状态改变
    const handleResize = () => {
      setShowTooltip(checkIsEllipsis());
    };
    window.addEventListener('resize', handleResize);

    // 组件卸载时移除监听
    return () => window.removeEventListener('resize', handleResize);
  }, [text]); // 文本更新时重新判断

  return (
    {/* 通过visible属性手动控制Tooltip显示 */}
    <Tooltip title={text} visible={showTooltip}>
      <Paragraph ref={paragraphRef} ellipsis>
        {text}
      </Paragraph>
    </Tooltip>
  );
};

// 使用示例
const App = () => {
  return (
    <div style={{ width: 200 }}>
      <EllipsisTooltipParagraph text="This text is displayed, so I don't want to show a tooltip." />
      <EllipsisTooltipParagraph text="This is a very long text that will definitely be truncated when placed in a small container, so the tooltip should appear on hover." />
    </div>
  );
};

export default App;

多行省略的适配 #

如果你的Paragraph是设置了多行省略（比如ellipsis={{ rows: 2 }}），只需要修改checkIsEllipsis函数的判断逻辑，换成对比高度：

const checkIsEllipsis = () => {
  const element = paragraphRef.current;
  if (!element) return false;
  // 多行截断判断：内容实际高度 > 容器显示高度
  return element.scrollHeight > element.clientHeight;
};

更精准的监听方案（可选） #

上面的窗口resize监听适用于大部分场景，但如果你的容器尺寸是动态变化的（比如父组件布局调整），可以用ResizeObserver来监听元素本身的尺寸变化，比window resize更精准：

useEffect(() => {
  const element = paragraphRef.current;
  if (!element) return;
  // 有时候需要获取Paragraph内部的文本容器（比如.ant-typography类的元素）
  const textElement = element.querySelector('.ant-typography') || element;

  // 创建ResizeObserver监听元素尺寸变化
  const observer = new ResizeObserver(() => {
    // 根据单行/多行选择对应的判断逻辑
    setShowTooltip(textElement.scrollWidth > textElement.clientWidth);
    // 多行的话换成：setShowTooltip(textElement.scrollHeight > textElement.clientHeight);
  });

  observer.observe(textElement);
  // 初始判断一次
  setShowTooltip(checkIsEllipsis());

  // 卸载时断开监听
  return () => observer.disconnect();
}, [text]);

关键注意点 #

• 必须给Tooltip设置visible属性，手动控制显示/隐藏，而不是依赖默认的hover触发逻辑
• 要监听文本变化和容器尺寸变化，确保状态能实时更新
• 如果Paragraph有自定义样式，注意不要影响scrollWidth/clientWidth的计算（比如不要设置overflow:hidden以外的overflow属性）

内容的提问来源于stack exchange，提问作者Óscar Giménez