Floating UI

解决浮动元素（工具提示、弹出框、下拉菜单等）的定位与交互难题。提供智能锚点定位、视口冲突避免、树摇优化等特性，支持 Web、React、React Native、Vue 及 Canvas 环境。

核心定位能力

Floating UI 提供 computePosition 等底层 API，支持 12 种 placement 方向（如 top-start、bottom-end），并通过中间件实现高级行为。

• 移位（shift）：自动移动浮动元素，使其始终保持在视口内
• 翻转（flip）：当空间不足时，自动翻转位置方向（如从 bottom 翻转为 top）
• 尺寸（size）：动态调整浮动元素尺寸以适应视口
• 箭头（arrow）：定位中心感知的箭头元素，支持滚动容器
• 虚拟锚点：可相对于任意坐标（如鼠标光标）定位，而非仅限 DOM 元素

React 交互工具包

@floating-ui/react 包提供无头 Hooks 和组件，用于构建可访问的浮动交互组件，不提供预构建 UI，强调开发者控制权。

• useFloating：核心 Hook，返回 refs 和 floatingStyles，默认将浮动元素定位在参考元素底部中心
• useInteractions：组合多个交互 Hook（hover、focus、click、dismiss 等）
• useHover / useFocus / useClick：分别处理悬停、聚焦、点击触发行为
• useDismiss：点击外部或按 Esc 关闭浮动元素
• useListNavigation / useTypeahead：支持键盘导航和输入筛选，适用于组合框、选择菜单
• FloatingFocusManager / FloatingPortal：管理焦点和渲染位置

体积与平台兼容性

Floating UI 采用纯模块化设计，每个中间件均可单独树摇，核心 computePosition 仅 0.6 kB，DOM 平台额外 2.5 kB。

• 树摇优化：shift（+0.6 kB）、flip（+0.8 kB）、arrow（+0.5 kB）等中间件按需加载
• 多平台绑定：@floating-ui/dom（Web）、@floating-ui/react（React 全功能）、@floating-ui/react-dom（仅定位）、@floating-ui/vue、React Native
• 无框架使用：可通过 CDN（如 Skypack）直接引入 computePosition
• Canvas 支持：可在非 DOM 环境中定位浮动元素

与 Popper 的差异

Floating UI 由 Popper 团队开发，是 Popper v2 的演进版本，但并非简单替代。

• 体积更小：Floating UI 核心 0.6 kB，Popper 约 3 kB 且不可树摇
• 跨平台原生支持：Popper 仅限 Web DOM，Floating UI 扩展至 React Native、Canvas
• 交互层分离：@floating-ui/react 提供独立的交互 Hook 体系，Popper 无此设计

常见问题

Q1：Floating UI 和 Popper 是什么关系？我应该迁移吗？

A1：Floating UI 由 Popper 团队开发，是 Popper v2 的演进版本。核心优势：体积更小（0.6 kB vs 3 kB）、支持树摇、跨平台（React Native、Canvas）。如果项目已用 Popper 且无性能或跨平台需求，可不迁移；新项目建议直接使用 Floating UI。

Q2：Floating UI 的 React 包和 @floating-ui/react-dom 有什么区别？

A2：@floating-ui/react-dom 仅提供定位功能（useFloating），体积更小；@floating-ui/react 包含完整交互工具包（useHover、useClick、useDismiss 等 20+ Hooks 和组件）。如果只需定位（如简单工具提示），用 react-dom；如需复杂交互（组合框、下拉菜单），用 react。

Q3：Floating UI 如何实现鼠标跟随定位？

A3：使用虚拟元素功能：将鼠标坐标（如 event.clientX, event.clientY）作为参考元素传入 computePosition 或 useFloating 的 reference 参数，即可实现浮动元素跟随鼠标移动。官网示例中「移动你的鼠标」Tooltip 即基于此实现。

更多同类工具与网站,可在动画库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。