Chakra UI 中受控 Tooltip 组件的延迟显示问题解析

问题现象

在 Chakra UI 3.3.0 版本中，当使用受控模式的 Tooltip 组件时，如果用户在延迟时间内快速悬停多个 Tooltip 触发器，会出现所有被悬停过的 Tooltip 在延迟结束后同时显示的问题。这与预期的行为不符，正常情况下应该只显示最后悬停的那个 Tooltip。

技术背景

Tooltip 是常见的 UI 组件，用于在用户悬停时显示额外的提示信息。Chakra UI 提供了两种使用方式：

1. 非受控模式：由组件内部管理显示状态
2. 受控模式：由开发者通过 props 控制显示状态

在受控模式下，Tooltip 的显示/隐藏状态完全由外部控制，开发者需要自己处理鼠标事件和延迟逻辑。

问题根源

这个问题源于底层状态机的实现逻辑。当多个 Tooltip 在延迟时间内被快速悬停时，状态机没有正确处理取消前一个悬停状态的逻辑，导致所有悬停事件都被记录下来并在延迟结束后触发显示。

解决方案

Chakra UI 团队已经修复了这个问题，主要改进包括：

1. 优化了状态机的转换逻辑
2. 确保新的悬停事件会取消前一个未完成的悬停状态
3. 保证只有最后一个悬停的 Tooltip 会在延迟结束后显示

修复后的行为表现为：即使用户在延迟时间内快速悬停多个 Tooltip，也只会显示最后悬停的那个 Tooltip，其他 Tooltip 的显示请求会被自动取消。

开发者建议

对于使用 Chakra UI 的开发者，建议：

1. 升级到包含此修复的最新版本
2. 在需要精确控制 Tooltip 显示逻辑的场景下，优先考虑使用受控模式
3. 合理设置 delay 参数，平衡用户体验和性能

这个修复体现了 Chakra UI 团队对细节的关注，确保了组件在各种使用场景下都能提供一致且符合预期的用户体验。