React中如何实现高度可变的Tooltip定位在目标文字上方且不重叠

方案1：纯CSS实现（推荐，无需JS计算） #

你不需要提前获取Tooltip高度，利用CSS定位规则就能实现需求：

• 把Tooltip的定位从top: -30px改成bottom: 100%，代表Tooltip的底部与父容器（包裹单词的div）的顶部对齐
• 增加margin-bottom: 10px，即可在Tooltip和单词之间留出固定间距，不管Tooltip高度怎么变都不会重叠
• 增加left: 50% + transform: translateX(-50%)实现水平居中，完全自适应Tooltip宽度

修改后的完整代码如下：

import { useState } from 'react';

const wordWithToolTip = ({ word, tooltip }) => {
    // 原代码缺少状态声明，需补充
    const [showTranslation, setShowTranslation] = useState(false);
    return (
        <div
            style={{ display: 'inline-block', position: 'relative', border: '2px solid red' }}
            onMouseEnter={() => setShowTranslation(true)}
            onMouseLeave={() => setShowTranslation(false)}
        >
            {showTranslation && (
                <div
                    style={{
                        position: 'absolute',
                        // 替换原有top定位为以下三行即可
                        bottom: '100%',
                        marginBottom: '10px',
                        left: '50%',
                        transform: 'translateX(-50%)',
                        // 原有样式保留
                        padding: '2px',
                        border: '2px solid black',
                        backgroundColor: 'white',
                        // 可选配置：限制最大宽度避免超出视口
                        maxWidth: '90vw',
                        wordBreak: 'break-word'
                    }}
                >
                    {tooltip}
                </div>
            )}
            <span>{word}</span>
        </div>
    );
};

方案2：JS动态计算高度（适用于需要处理视口边界等复杂场景） #

如果需要额外判断Tooltip是否超出视口、自动调整位置等特殊逻辑，可以通过Ref获取实际渲染后的Tooltip高度计算定位：

import { useState, useRef, useEffect } from 'react';

const wordWithToolTip = ({ word, tooltip }) => {
    const [showTranslation, setShowTranslation] = useState(false);
    const tooltipRef = useRef(null);
    const [tooltipTop, setTooltipTop] = useState(0);

    useEffect(() => {
        if (showTranslation && tooltipRef.current) {
            // 获取渲染后的Tooltip实际高度
            const tooltipHeight = tooltipRef.current.offsetHeight;
            // 计算定位值：负的高度再减10px间距
            setTooltipTop(-(tooltipHeight + 10));
        }
    }, [showTranslation, tooltip]);

    return (
        <div
            style={{ display: 'inline-block', position: 'relative', border: '2px solid red' }}
            onMouseEnter={() => setShowTranslation(true)}
            onMouseLeave={() => setShowTranslation(false)}
        >
            {showTranslation && (
                <div
                    ref={tooltipRef}
                    style={{
                        position: 'absolute',
                        top: `${tooltipTop}px`,
                        left: '50%',
                        transform: 'translateX(-50%)',
                        padding: '2px',
                        border: '2px solid black',
                        backgroundColor: 'white',
                        maxWidth: '90vw',
                        wordBreak: 'break-word'
                    }}
                >
                    {tooltip}
                </div>
            )}
            <span>{word}</span>
        </div>
    );
};

内容的提问来源于stack exchange，提问作者antonwilhelm