React智能Tooltip封装术：精准检测文本溢出，告别无效提示！

1.封装公共组件

import React, { useRef, useState, useEffect } from 'react';
import { Tooltip } from 'antd';/*** 智能 Tooltip 组件 - 仅在文本溢出时显示提示* * @param children 需要包装的内容* @param title Tooltip 显示的提示内容（如果不提供则默认为文本内容）* @param className 自定义类名* @param style 自定义样式* @param tooltipProps 其他传递给 Antd Tooltip 的属性*/
const SmartTooltip = ({ children, title, className = '', style = {}, ...tooltipProps 
}) => {const containerRef = useRef(null);const [isOverflowing, setIsOverflowing] = useState(false);const [content, setContent] = useState(children);// 检查元素是否溢出const checkOverflow = () => {if (!containerRef.current) return false;const container = containerRef.current;return container.scrollWidth > container.clientWidth;};useEffect(() => {const container = containerRef.current;// 初始化检查setIsOverflowing(checkOverflow());// 添加窗口大小变化的监听器const handleResize = () => {setIsOverflowing(checkOverflow());};window.addEventListener('resize', handleResize);const resizeObserver = new ResizeObserver(handleResize);if (container) {resizeObserver.observe(container);}// 清理函数return () => {window.removeEventListener('resize', handleResize);if (container) {resizeObserver.unobserve(container);}resizeObserver.disconnect();};}, [content]);// 监听内容变化useEffect(() => {setContent(children);}, [children]);// 计算实际显示的 Tooltip 内容const tooltipContent = title || content;return (<Tooltip title={isOverflowing ? tooltipContent : null} mouseEnterDelay={0.2}placement="topLeft"{...tooltipProps}><divref={containerRef}className={`truncate ${className}`}style={{...style}}>{content}</div></Tooltip>);
};export default SmartTooltip;

2.实际使用

import React from 'react';
import SmartTooltip from './SmartTooltip';const DemoComponent = ({ item }) => (<div className="mt-[10px]"><SmartTooltip className="txt1 w-[100px]">{item?.roadShowTitle ? item?.roadShowTitle : '----'}</SmartTooltip></div>
);export default DemoComponent;