FloatingUI 中 Tooltip 位置更新问题的解决方案

问题背景

在使用 FloatingUI 库开发 Electron 应用时，开发者遇到了一个常见问题：当窗口大小改变时，Tooltip 的位置不会自动更新，导致 Tooltip 显示位置不正确甚至"消失"。这种情况在响应式布局中尤为明显，特别是在侧边导航栏中使用 Tooltip 时。

问题分析

通过深入分析，我们发现这个问题主要由两个因素导致：

1. 位置更新机制：FloatingUI 默认不会在窗口大小改变时自动更新浮动元素的位置。这是设计上的考虑，因为库无法确定开发者是使用条件渲染还是通过 CSS 隐藏元素。

2. 手动偏移调整：开发者为了视觉上的美观，手动添加了位置偏移（top 和 left），这虽然解决了初始显示问题，但却干扰了库自身的定位计算逻辑。

解决方案

1. 启用自动更新

FloatingUI 提供了一个优雅的解决方案：使用 whileElementsMounted 选项配合 autoUpdate 函数。这个组合会在元素挂载期间自动监听各种可能导致位置变化的事件，包括窗口大小改变、滚动等。

const { refs, floatingStyles, context } = useFloating({
  placement: 'right',
  middleware: [
    arrow({
      element: arrowRef,
    }),
  ],
  whileElementsMounted: autoUpdate
});

2. 避免手动偏移

手动添加位置偏移通常是视觉调整的临时方案，但会带来维护问题。正确的做法应该是：

1. 检查参考元素的尺寸和边距，确保其布局尺寸与视觉尺寸一致
2. 使用 FloatingUI 提供的定位机制，如 offset 中间件，来进行精确的位置调整
3. 通过 CSS 而非 JavaScript 来处理视觉上的微调

最佳实践

1. 响应式设计：始终考虑窗口大小变化对 UI 元素的影响，特别是在 Electron 应用中。

2. 定位策略：优先使用 FloatingUI 提供的定位机制，而非手动调整位置。

3. 性能考虑：虽然 autoUpdate 很方便，但在高频更新的场景下（如动画元素），可能需要考虑节流或防抖。

4. 视觉一致性：通过 CSS 变量或主题系统来管理 Tooltip 的视觉样式，保持应用整体风格统一。

总结

FloatingUI 提供了强大的定位能力，但需要正确使用其 API。通过理解其设计理念和合理配置选项，可以轻松实现响应式的 Tooltip 定位效果。记住，库提供的机制通常比手动调整更可靠和可维护。