Android端Tooltip异常：getBoundingClientRect返回rect.right为0求助

问题现象 #

实现的Tooltip功能在桌面端、iOS端及窗口大小调整的浏览器中表现正常，但在Android设备上存在异常：点击屏幕右侧边缘附近的?按钮时，Tooltip会超出屏幕显示，无法正确定位。排查发现仅Android设备上，getBoundingClientRect()返回的rect.right值始终为0，其他平台无此问题。

核心原因 #

Android浏览器中，初始状态为hidden的元素（通过Tailwind的hidden类）在调用getBoundingClientRect()时，元素处于不可见状态，浏览器不会计算其实际布局尺寸，导致返回的rect属性（如right、width）为0，进而无法触发右侧边缘的定位逻辑。

解决方案 #

方案1：调整Tooltip显示控制方式，避免使用hidden类 #

将Tooltip的显示从hidden/block切换为通过opacity和visibility控制，确保元素始终存在于布局流中，让getBoundingClientRect()能正确获取尺寸：

修改Tooltip的HTML类：

<div
    class="tooltip-content pointer-events-none absolute bottom-full mb-2 opacity-0 invisible w-64 rounded bg-slate-700 px-3 py-2 text-sm text-white group-hover:opacity-100 group-hover:visible"
>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>

调整adjustTooltipPosition函数，移除原手动控制opacity的代码，增加重绘等待逻辑：

function adjustTooltipPosition(event) {
    const group = event?.currentTarget || event;
    const tooltip = group.querySelector('.pointer-events-none');
    
    if (!tooltip) return;

    // 重置初始位置
    tooltip.style.left = '50%';
    tooltip.style.right = 'auto';
    tooltip.style.transform = 'translateX(-50%)';

    // 等待浏览器重绘后获取正确的布局信息
    requestAnimationFrame(() => {
        const rect = tooltip.getBoundingClientRect();
        const viewportWidth = window.innerWidth;

        // 处理右侧溢出
        if (rect.right > viewportWidth - 10) {
            tooltip.style.left = 'auto';
            tooltip.style.right = '0';
            tooltip.style.transform = 'none';
        }

        // 处理左侧溢出
        if (rect.left < 10) {
            tooltip.style.left = '0';
            tooltip.style.right = 'auto';
            tooltip.style.transform = 'none';
        }
    });
}

方案2：先强制显示Tooltip再计算位置 #

如果坚持使用hidden类，可在计算前先移除hidden类，等待重绘后获取布局信息再处理定位：

function adjustTooltipPosition(event) {
    const group = event?.currentTarget || event;
    const tooltip = group.querySelector('.pointer-events-none');
    
    if (!tooltip) return;

    // 先显示tooltip，确保布局生效
    tooltip.classList.remove('hidden');
    tooltip.style.opacity = '0';

    // 重置初始位置
    tooltip.style.left = '50%';
    tooltip.style.right = 'auto';
    tooltip.style.transform = 'translateX(-50%)';

    // 等待浏览器完成重绘
    requestAnimationFrame(() => {
        const rect = tooltip.getBoundingClientRect();
        const viewportWidth = window.innerWidth;

        // 调整右侧溢出定位
        if (rect.right > viewportWidth - 10) {
            tooltip.style.left = 'auto';
            tooltip.style.right = '0';
            tooltip.style.transform = 'none';
        }
        // 调整左侧溢出定位
        if (rect.left < 10) {
            tooltip.style.left = '0';
            tooltip.style.right = 'auto';
            tooltip.style.transform = 'none';
        }

        tooltip.style.opacity = '1';
    });
}

额外优化建议 #

• 直接使用Svelte的事件绑定（on:pointerenter={adjustTooltipPosition}）替代onMount中手动添加事件监听器，更符合Svelte组件化逻辑。
• 将Tooltip封装为独立组件，通过绑定元素位置计算定位，提升代码复用性与可维护性。

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