容器溢出时，react-bootstrap OverlayTrigger位置不正确：自动

Question

编辑：找到解决方案：popperConfig = {添加到OverlayTrigger的{修饰符：{preventOverflow：{boundariesElement：'offsetParent'}}}}有所不同。我要问的是是否有人有同样的问题。

使用react-bootstrap（v1.0.0-beta.5）渲染内容时遇到问题。我有包含按钮列表的主容器，每个按钮都用OverlayTrigger（重叠式工具提示）包装。由于有很多列表项，所以整个容器必须具有“ overflow-x：auto”，但似乎破坏了工具提示/叠加层的位置（当我从CSS中删除它时，叠加层的位置就很好了。）

我附了一张照片。如您所见，工具提示位于按钮上，而不是位于按钮的顶部。

有人可以帮助我了解如何解决吗？

 .container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

const editTooltip = <Tooltip id='edit_tooltip'>hello edit tooltip</Tooltip>;

<div className='container'>
   <div className='item-1'>
     <OverlayTrigger
       placement='top'
       overlay={editTooltip}
       delay={700}
      >
       <Button
         variant={'light'}
         bsPrefix={'custom-btn'}
         onClick={() => console.log('clicked')}
      >
        <Icon icon='pencil' />
      </Button>
    </OverlayTrigger>
  </div>
</div>

Answer 1

我遇到了一个问题，我的弹出器打算放在元素的“底端”-即使我的目标似乎设置正确（并且弹出器被附加到body元素上，所以它不应该）如果受任何约束），我越靠近包含目标的元素的底部（表中的行，每行中的一个图标触发了该行的选项弹出窗口），弹出窗口似乎就会被推入垂直放置，以便它始终显示在行所在的容器中。我找不到当前文档，甚至显示“ offsetParent”作为boundaryElement的选项...但是此解决方案对我有用。很棒的发现！ （即使我仍然不完全了解您是如何找到它的...）

注意：我的示例仅使用了react-bootstrap中的一个简单的Overlay组件，但问题/解决方案类似。