如何实现仅当文本被截断时才触发Tooltip显示？

这个场景我太熟悉了——默认只要hover就弹Tooltip，哪怕文本完全显示，确实有点多余。我们只需要加个小逻辑，判断文本真的被截断了再让Tooltip出场就行，具体做法如下：

核心思路 #

通过对比文本容器的scrollWidth（文本实际需要的总宽度）和clientWidth（容器的可见宽度），就能知道文本是否溢出：如果scrollWidth > clientWidth，说明文本被截断了，否则就是完全显示的状态。

修改后的完整代码 #

首先确保导入必要的React Hooks，然后调整组件逻辑：

import { FC, useRef, useState, useEffect } from 'react';
import styled from 'styled-components';

const CutOfContainer = styled.div`
  position: relative;
`;

const CutOfText = styled.div`
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 240px;
`;

const FullTextTooltip = styled.div<{ $isVisible: boolean }>`
  width: max-content;
  max-width: 600px;
  visibility: ${props => props.$isVisible ? 'visible' : 'hidden'};
  position: absolute;
  padding: 8px 16px;
  background-color: white;
  border-radius: 5px;
  z-index: 999999;
  top: calc(100% + 5px);
`;

const CutOfTextComponent: FC<{ children: React.ReactNode }> = ({ children }) => {
  // 拿到文本容器的DOM引用
  const textRef = useRef<HTMLDivElement>(null);
  // 跟踪文本是否溢出的状态
  const [isOverflow, setIsOverflow] = useState(false);

  useEffect(() => {
    const checkOverflow = () => {
      if (textRef.current) {
        // 对比宽度判断是否溢出
        setIsOverflow(textRef.current.scrollWidth > textRef.current.clientWidth);
      }
    };

    // 初始化时检查一次
    checkOverflow();
    // 监听窗口 resize，防止容器宽度变化导致判断失效
    window.addEventListener('resize', checkOverflow);

    // 组件卸载时移除监听
    return () => window.removeEventListener('resize', checkOverflow);
  }, [children]); // 文本内容变化时重新检查

  return (
    <CutOfContainer>
      <CutOfText ref={textRef}>{children}</CutOfText>
      {/* 根据溢出状态控制Tooltip可见性 */}
      <FullTextTooltip $isVisible={isOverflow}>{children}</FullTextTooltip>
    </CutOfContainer>
  );
};

关键细节说明 #

• useRef：绑定到CutOfText元素，让我们能直接访问DOM的宽度属性。
• useEffect逻辑：
  • 初始化和文本变化时，自动检查是否溢出。
  • 监听窗口resize事件，因为如果容器是响应式的（比如宽度随窗口变化），文本的溢出状态也可能跟着变。
• Tooltip控制：通过styled-components的动态props$isVisible来控制visibility，或者你也可以直接用条件渲染（{isOverflow && <FullTextTooltip>...</FullTextTooltip>}），两种方式都能达到效果。

这样调整后，只有当文本真的被截断时，hover才会显示Tooltip，完美解决你的问题！

内容的提问来源于stack exchange，提问作者Steven De Keuster