@tippyjs/react仪表盘侧边栏滚动时定位异常求助

针对你使用@tippyjs/react@4.2.6在侧边栏遇到的滚动定位偏移问题，以下是直接有效的修复方案：

核心修复方案：统一Tooltip与触发元素的上下文 #

最常见的原因是Tooltip默认挂载到body，而侧边栏通常是fixed/sticky定位，当页面滚动时，body的滚动会导致Tooltip的定位计算脱离触发元素的上下文。

方案1：将Tooltip挂载到侧边栏容器 #

修改你的TippyReload组件，把Tooltip挂载到触发元素的父容器（侧边栏），确保两者处于同一滚动上下文：

import React, { useRef } from "react";
import Tippy from "@tippyjs/react";

const TippyReload = props => {
  const parentContainerRef = useRef(null);

  return (
    <div ref={parentContainerRef}>
      <Tippy
        animation="fade"
        theme="custom"
        content="Refresh Count"
        placement="top"
        arrow={true}
        className="custom-tippy"
        // 强制Tooltip挂载到父容器
        appendTo={() => parentContainerRef.current}
        // 开启滚动时自动更新定位
        updateOnScroll={true}
      >
        {props.children}
      </Tippy>
    </div>
  );
};

export default TippyReload;

方案2：指定滚动监听容器 #

如果滚动的是右侧内容的独立容器（而非body），需要明确告诉Tippy监听该容器的滚动事件：

// 假设你通过ref获取到右侧滚动容器
const scrollContainerRef = useRef(null);

<Tippy
  // ...其他属性
  // 指定滚动监听的容器
  scrollParents={[scrollContainerRef.current]}
  updateOnScroll={true}
>
  {props.children}
</Tippy>

方案3：调整Popper定位规则 #

如果上述方案无效，可通过底层Popper.js的配置强制基于触发元素计算位置：

<Tippy
  // ...其他属性
  popperOptions={{
    modifiers: [
      {
        name: "computeStyles",
        options: {
          adaptive: false, // 禁用自适应定位，避免基于viewport计算
        },
      },
    ],
  }}
>
  {props.children}
</Tippy>

问题本质 #

当页面出现滚动条时，默认挂载到body的Tooltip会以初始viewport坐标为基准，而侧边栏的触发元素通常是固定定位，不会随页面滚动移动，两者的相对位置就会出现偏差，表现为Tooltip偏上。

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