rc-tooltip靠近窗口边缘时闪烁问题求助

这个问题确实存在，是rc-tooltip内部定位逻辑在Chrome/Safari下的bug——当设置placement为top/bottom且tooltip左右空间不足时，组件会反复计算摆放位置导致闪烁，官方demo也能复现；Firefox不受影响是因为浏览器布局重绘机制的差异。

临时修复方案 #

• 强制固定位置，关闭自动调整：给Tooltip组件加上forceRender和popupAlign属性，直接锁定位置，不让组件自动切换摆放方向。示例代码：

<Tooltip
  placement="top"
  forceRender
  popupAlign={{
    points: ['top', 'bottom'],
    offset: [0, -8], // 可根据需求调整偏移量
  }}
  content="你的提示文本"
>
  <button>Hover me</button>
</Tooltip>

• 限制tooltip最大宽度：给提示内容设置max-width，避免内容过宽超出左右空间，从根源上避免触发自动位置计算。示例：

<Tooltip
  placement="bottom"
  content={<div style={{ maxWidth: '250px', wordWrap: 'break-word' }}>较长的提示内容...</div>}
>
  <span>触发元素</span>
</Tooltip>

无问题的旧版本 #

亲测rc-tooltip@4.2.2版本不存在这个问题，因为当时的定位逻辑还没升级到新版的布局计算逻辑。可以通过以下命令降级：

npm install rc-tooltip@4.2.2
# 或者用 yarn: yarn add rc-tooltip@4.2.2

目前这个bug已经在rc-tooltip的GitHub仓库被提交issue，维护团队正在跟进修复，暂时可以用上面的方案解决问题。

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