Floating UI
A small JavaScript library for positioning tooltips, popovers and dropdowns next to other elements.
- Stars
- 32.8k
- Forks
- 1.7k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 10 days ago
- Type
- Library
What it is
Floating UI is a small JavaScript library for placing 'floating' elements such as tooltips, popovers, and dropdowns next to another element on a page. It keeps these elements attached to their anchor and adjusts their position so they stay visible when they would otherwise run off the edge of the viewport. For React users it also offers hooks and components for building accessible interactions.
- Anchor a tooltip to a button and keep it inside the viewport when the button is near an edge
- Build a dropdown menu that repositions itself while the user scrolls a container
- Create accessible popover components in React using the interaction hooks
- Position floating elements in a custom Vue or React Native app using the matching package
Great for
- Web developers building tooltips, popovers, or dropdown menus
- Teams that need positioning to work inside scrolling containers
- React developers who want both positioning and interaction hooks
- Developers who need a positioning engine for non-DOM platforms such as Canvas or WebGL
Not ideal for
- People who only need a simple static CSS tooltip with no JavaScript, since this library adds a dependency for behavior plain CSS can cover
- Non-developers, because the library is used through code and the README assumes familiarity with npm and JavaScript frameworks
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm
Install for vanilla DOM
npm install @floating-ui/domInstall for React DOM with positioning and interactions
npm install @floating-ui/reactInstall for Vue
npm install @floating-ui/vue - 2
Run it
- Install the package for your platform using npm
- Read the tutorial at floating-ui.com/docs/tutorial, which builds a basic tooltip
- Use the computePosition API from the documentation to place your element
- 3
Get the most out of it
- Use the React package for interaction hooks if you need accessible popover behavior, not only positioning
- Use the React DOM positioning-only package if you want a smaller bundle
- Create a custom Platform to support Canvas, WebGL, or other JavaScript runtimes
- Run the local visual test playgrounds with pnpm to see how each state combination behaves
Downloads
Strengths
- Handles collisions with the viewport so floating elements stay visible, as described in the README
- Supports several frameworks and platforms, including vanilla DOM, React, React Native, Vue, and a core package for custom platforms
- Has a visual test setup with Playwright screenshots, which the README describes as covering every state combination
Trade-offs
- Requires you to wire up the positioning yourself in code, so it is not a plug-and-play component set
- Feature details beyond the README overview, such as the full API, are only available in the external documentation site
- Popper v2 users need to follow a separate branch and migration guide
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| floating-ui (this) | 32.8k | Library | intermediate | 10 days ago | Web developers building tooltips, popovers, or dropdown menus |
| tippyjs | 12.2k | Library | intermediate | 2.4 years ago | Web developers who want ready-made tooltips or dropdown menus without building them from scratch |
| Semantic-UI | 51k | Library | beginner | 1.9 years ago | Front-end developers who want prebuilt UI components they can restyle with themes |
| driver.js | 27k | Library | intermediate | 8 days ago | Web developers adding a product tour or onboarding flow to an existing web app |
| downshift | 12.3k | Library | intermediate | 4 months ago | React developers building a custom autocomplete or search-as-you-type input |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.