容器溢出时 React-bootstrap OverlayTrigger 定位不正确：自动

Question

使用 react-bootstrap (v1.0.0-beta.5) 渲染内容时遇到问题。 我有带有按钮列表的主容器，每个按钮都用 OverlayTrigger （覆盖中的工具提示）包裹。 由于有许多列表项，整个容器必须具有“溢出-x：自动”，但它似乎破坏了工具提示/叠加层的定位（当我从 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

我有一个问题，我的 popper 打算位于元素的“底端” - 即使我的目标似乎设置正确（并且 popper 附加到 body 元素，所以它不应该是受任何约束），我越接近包含目标的元素底部（表格中的行，每行中的一个图标触发该行的选项弹出器），弹出器似乎会被垂直推动，以便它总是出现在行所在的容器中。 我找不到甚至显示“offsetParent”作为边界元素选项的当前文档......但这个解决方案对我有用。 很棒的发现！！ （即使我仍然不完全理解你是如何找到它的......）

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

Answer 2

为按钮提供类名并使用边距属性将按钮放在工具提示下方

.container{
         position:relative;
          }

.button{
         margin-top:15px;
       }