Popper is now Floating UI! For Popper v2, visit its dedicated branch. For help on migrating, check out the Migration Guide.
Floating UI is a tiny, low-level library for creating "floating" elements like tooltips, popovers, dropdowns, menus, and more.
The library provides two key functionalities:
CSS is currently missing a feature called “anchored positioning” — the ability to anchor an element (like a tooltip) to another one (like a button) while simultaneously keeping it in view as best as possible by avoiding clipping and overflow.
Attempting to do fully dynamic anchored positioning with today’s plain CSS is not possible. Floating UI provides a JavaScript implementation of this feature.
When creating a popover, dropdown menu, select, or combobox component that follows WAI-ARIA authoring practices, the complexity increases dramatically. Focus traps, indexed navigation, and typeahead are difficult to get right.
This functionality is currently available for React DOM but will be made agnostic in the future.
Choose the package that suits you.
Use with vanilla JavaScript or a non-React framework (view tutorial).
npm install @floating-ui/domUse with React DOM (view docs).
npm install @floating-ui/react-domPrimitive hooks and components, in addition to the positioning engine, to use with React DOM (view docs).
npm install @floating-ui/react-dom-interactionsUse with React Native (view docs).
npm install @floating-ui/react-nativeLearn about creating a Platform.
npm install @floating-ui/coreimport {computePosition} from '@floating-ui/dom';
const referenceElement = document.querySelector('#button');
const floatingElement = document.querySelector('#tooltip');
function applyStyles({x = 0, y = 0, strategy = 'absolute'}) {
Object.assign(floatingElement.style, {
position: strategy,
left: `${x}px`,
top: `${y}px`,
});
}
applyStyles();
computePosition(referenceElement, floatingElement, {
placement: 'right',
}).then(applyStyles);Visit the docs for detailed information.
Using webpack, Vite, or Parcel? Skip this section as modern bundlers handle this for you.
Floating UI uses process.env.NODE_ENV to determine whether your build is in
development or production mode. This allows us to add console warnings and
errors during development to help you but ensure they get stripped out in
production to keep the bundle size small.
This causes an error in Rollup and low/no-build setups. To solve this, Floating UI exports browser-ready ES modules. Leverage the "browser" package export condition to use these modules.
Rollup example
The browser option in the nodeResolve() plugin will select browser versions
of packages if available.
import {nodeResolve} from '@rollup/plugin-node-resolve';
export default {
// ...
plugins: [
nodeResolve({
browser: true,
// Add this line for development config, omit for
// production config
exportConditions: ['development'],
}),
],
};This project is a monorepo written in TypeScript using npm workspaces. The website is using Next.js SSG and Tailwind CSS for styling.
- Fork and clone the repo
- Install dependencies in root directory with
npm install - Build initial package dist files with
npm run build
npm -w packages/dom run dev in the root will launch the @floating-ui/dom
development visual tests at http://localhost:1234. The playground uses React
to write each test route, bundled by Parcel.
Each route has screenshots taken of the page by Playwright to ensure all the functionalities work as expected; this is an easy, reliable and high-level way of testing the code.
Below the main container are UI controls to turn on certain state and options. Every single combination of state is tested visually via the snapshots to cover as much as possible.
The floating shapes in the banner image are made by the amazing artists @artstar3d, @killnicole and @liiiiiiii on Figma — check out their work!
MIT