React 18.2.0 + React-tooltip 5.13.1：悬停按钮时关闭其他延迟提示

针对你遇到的React-tooltip重叠问题，结合React 18.2.0和React-tooltip 5.13.1的特性，可通过以下步骤解决：

1. 核心思路 #

• 普通按钮悬停时，调用全局方法关闭所有已显示的tooltip（无论触发方式）
• 点击触发的帮助按钮，通过分组实现仅关闭同类型tooltip，不影响悬停触发的提示
• 替换废弃的回调属性，解决onOpen/onShow无响应的问题

2. 具体实现步骤 #

2.1 导入必要方法与样式 #

import { Tooltip, hideAll } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

2.2 普通按钮处理（悬停触发） #

给普通按钮绑定onMouseEnter事件，触发时调用hideAll()关闭所有tooltip，避免重叠：

<button
  data-tooltip-id="normal-btn-tooltip"
  data-tooltip-content="普通按钮的提示内容"
  onMouseEnter={() => hideAll()}
>
  普通按钮
</button>
<Tooltip
  id="normal-btn-tooltip"
  trigger="hover"
  delayShow={500} // 自定义显示延迟
  onVisibleChange={(isVisible) => {
    // 替代原onOpen/onShow的回调，监听显示状态变化
    console.log('普通按钮tooltip状态:', isVisible);
  }}
/>

2.3 帮助按钮处理（点击触发） #

将所有点击触发的tooltip设置为同一group，实现点击时仅关闭同组tooltip，不影响悬停提示：

<button
  data-tooltip-id="help-btn-tooltip-1"
  data-tooltip-content="帮助按钮1的提示内容"
>
  帮助按钮1
</button>
<Tooltip
  id="help-btn-tooltip-1"
  trigger="click"
  delayShow={500}
  group="help-group" // 同组tooltip互斥
/>

<button
  data-tooltip-id="help-btn-tooltip-2"
  data-tooltip-content="帮助按钮2的提示内容"
>
  帮助按钮2
</button>
<Tooltip
  id="help-btn-tooltip-2"
  trigger="click"
  delayShow={500}
  group="help-group"
/>

3. 关键说明 #

• hideAll()：React-tooltip提供的全局方法，可立即关闭所有当前显示的tooltip，完美解决悬停普通按钮时的重叠问题
• group属性：同组的tooltip会自动互斥，点击其中一个时，同组其他tooltip会关闭，不同组的悬停tooltip不受影响
• onVisibleChange：React-tooltip 5.x版本替换了原onOpen/onShow的回调属性，用于监听tooltip的显示/隐藏状态变化，解决你之前无日志输出的问题

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