如何突破overflow:auto限制，让Tooltip显示在react-window网格外

核心原因 #

react-window的List容器默认带有overflow:auto属性，而react-tooltip默认会渲染在锚点元素的父层级内，导致tooltip被容器的裁切规则限制，无法完整显示。

可行解决方案 #

方案1：利用react-tooltip的Portal特性挂载到body #

通过portal属性将tooltip渲染到<body>节点，彻底脱离react-window容器的overflow限制，同时修正原代码中重复id的问题（重复id会导致tooltip绑定异常）。

修改后的Row组件代码：

const Row = ({ index, style }) => {
  // 给每个锚点设置唯一id
  const anchorId = `row-tooltip-${index}`;
  return (
    <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
      <a id={anchorId}>Row {index}</a>
      <Tooltip 
        anchorSelect={`#${anchorId}`} 
        clickable
        portal="body" // 关键配置：将tooltip挂载到body
        place="right" // 可选：调整显示位置避免视口裁切
      >
        <span style={{ width: "100px" }}>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. In accusantium
          suscipit, facere reiciendis aliquam modi officiis aspernatur, eius
          doloremque dolor rerum atque quaerat quia quas deserunt possimus, dicta
          iure culpa.
        </span>
      </Tooltip>
    </div>
  );
};

方案2：使用React Ref绑定锚点（替代id选择器） #

如果不想使用id，可通过createRef直接绑定锚点元素，同样配合portal实现脱离容器限制：

const Row = ({ index, style }) => {
  const anchorRef = React.useRef(null);
  return (
    <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
      <a ref={anchorRef}>Row {index}</a>
      <Tooltip 
        anchorEl={anchorRef.current} 
        clickable
        portal="body"
        place="right"
      >
        <span style={{ width: "100px" }}>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. In accusantium
          suscipit, facere reiciendis aliquam modi officiis aspernatur, eius
          doloremque dolor rerum atque quaerat quia quas deserunt possimus, dicta
          iure culpa.
        </span>
      </Tooltip>
    </div>
  );
};

补充注意事项 #

• portal="body"是解决裁切问题的核心，它让tooltip脱离react-window的滚动容器上下文。
• 必须避免重复id：原代码中所有行共用#clickable会导致tooltip触发逻辑混乱，每个锚点需要唯一标识。
• 可通过place属性调整tooltip的显示方位（top/right/bottom/left），避免tooltip超出浏览器视口范围。

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