编辑:找到解决方案: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>
答案 0 :(得分:0)
我遇到了一个问题,我的弹出器打算放在元素的“底端”-即使我的目标似乎设置正确(并且弹出器被附加到body元素上,所以它不应该)如果受任何约束),我越靠近包含目标的元素的底部(表中的行,每行中的一个图标触发了该行的选项弹出窗口),弹出窗口似乎就会被推入垂直放置,以便它始终显示在行所在的容器中。我找不到当前文档,甚至显示“ offsetParent”作为boundaryElement的选项...但是此解决方案对我有用。很棒的发现! (即使我仍然不完全了解您是如何找到它的...)
注意:我的示例仅使用了react-bootstrap中的一个简单的Overlay组件,但问题/解决方案类似。