如何解决Bootstrap-react Tooltip滚动时闪烁的问题？

问题现象 #

使用Bootstrap-react的Tooltip组件时，页面处于顶部位置时Tooltip可正常触发显示；但鼠标悬停触发Tooltip后，滚动页面过程中Tooltip会出现上下闪烁的异常情况。

复现代码 #

以下是能复现该问题的基础组件代码：

return(
    <>
        <OverlayTrigger
          key={props.toolplace}
          placement={props.toolplace}
          overlay={
            <Tooltip id={`tooltip-${props.toolplace}`}>
              {props.tooltipText}
            </Tooltip>
          }
        >
          {props.children}
        </OverlayTrigger>
    </>
  );

解决方法 #

为Tooltip组件添加style={{position:"fixed"}}样式，修改后Tooltip在滚动时不再出现闪烁问题。

修改后的Tooltip代码如下：

<Tooltip id={`tooltip-${props.toolplace}`} style={{position:"fixed"}}>
   {props.tooltipText}
</Tooltip>

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