Floating UI

A low-level toolkit to create floating elements. Tooltips, popovers, dropdo...

Tooltip
floating-ui/floating-uifloating-ui.com@popperjs/core

README

Floating UI


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:

1. Anchor positioning


Anchor a floating element (like a tooltip) to another element (like a button)
while simultaneously ensuring it stays in view as best as possible with
collision detection.

2. User interactions for React


Hooks and components for composing interactions to create accessible floating UI
components.

Install


Choose the package that suits you.

Vanilla DOM positioning


Use with vanilla JavaScript or a non-React framework
(view tutorial).

  1. ``` sh
  2. npm install @floating-ui/dom
  3. ```

React DOM positioning


Use with React DOM (view docs).

  1. ``` sh
  2. npm install @floating-ui/react-dom
  3. ```

React DOM interactions and positioning


Craft interactions in addition to anchor positioning
(view docs).

  1. ``` sh
  2. npm install @floating-ui/react-dom-interactions
  3. ```

React Native positioning


Use with React Native (view docs).

  1. ``` sh
  2. npm install @floating-ui/react-native
  3. ```

Canvas or other platforms


Learn about creating a Platform.

  1. ``` sh
  2. npm install @floating-ui/core
  3. ```

Quick start


  1. ``` js
  2. import {computePosition} from '@floating-ui/dom';

  4. const referenceElement = document.querySelector('#button');
  5. const floatingElement = document.querySelector('#tooltip');

  7. function applyStyles({x = 0, y = 0, strategy = 'absolute'}) {
  8.   Object.assign(floatingElement.style, {
  9.     position: strategy,
  10.     left: `${x}px`,
  11.     top: `${y}px`,
  12.   });
  13. }

  15. applyStyles();

  17. computePosition(referenceElement, floatingElement, {
  18.   placement: 'right',
  19. }).then(applyStyles);
  20. ```

Visit the docs for detailed information.

Package entry points


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.

  1. ``` js
  2. import {nodeResolve} from '@rollup/plugin-node-resolve';

  4. export default {
  5.   // ...
  6.   plugins: [
  7.     nodeResolve({
  8.       browser: true,

  10.       // Add this line for development config, omit for
  11.       // production config
  12.       exportConditions: ['development'],
  13.     }),
  14.   ],
  15. };
  16. ```


Contributing


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

Testing grounds


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.

Credits


The floating shapes in the banner image are made by the amazing artists
@artstar3d,
@killnicole and
@liiiiiiii on Figma — check out their work!

License


MIT