javascript - 当容器溢出时，React-bootstrap OverlayTrigger 定位不正确 : auto

Question

我在使用 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

给按钮一个类名，并使用 margin 属性将按钮放在工具提示下方。

.container {
  position: relative;
}

.button {
  margin-top: 15px;
}