使用OverlayTrigger时如何设置Overlay组件的container属性？

正确配置方式 #

OverlayTrigger 本身已继承Overlay组件的所有属性，container 是OverlayTrigger的顶层属性，不需要放到popperConfig中配置：

• 之前配置失效的两个原因：
  • 将container放在popperConfig对象中传递，不属于popper的配置项，不会生效
  • 若直接传container属性仍失效，通常是传入的ref在组件挂载阶段还未获取到真实DOM节点，或者ref指向错误

修正后代码示例 #

import { useRef } from 'react';
import { Container, OverlayTrigger, Tooltip } from 'react-bootstrap';
import { FaUser } from 'react-icons/fa';

function YourComponent() {
  // 声明ref绑定容器元素
  const rowContainer = useRef(null);
  
  const renderUserTooltip = (props) => (
    <Tooltip {...props}>
      用户提示内容
    </Tooltip>
  );

  return (
    <Container fluid className='flex-fill' ref={rowContainer}>
      {/* 其他业务代码 */}

      {/* 直接在OverlayTrigger顶层传入container属性，值为绑定了容器的ref */}
      <OverlayTrigger 
        delay={{show: 500}} 
        overlay={renderUserTooltip}
        container={rowContainer}
      >
        <FaUser/>
      </OverlayTrigger>
    </Container>
  )
}

补充说明 #

如果你的场景不需要限定提示挂载到指定容器，也可以直接传入container={document.body}，将提示挂载到全局body节点下，可以100%避开父容器overflow: hidden导致的截断问题。如果触发元素位于滚动容器内，请确保container指向的就是该滚动容器，避免滚动时提示和触发元素错位。

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