Skip to content
Get packs

Guide · Open source

How to use floating-ui: install and position tooltips

Updated · written with AI from the project's own documentation and checked against our catalogue data

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 those elements anchored to their trigger and adjusts their position when they would run off the edge of the viewport. This guide shows you how to install the right package for your project, what the library does, and where to go next to build a working tooltip.

Floating UIfloating-ui/floating-ui · ★ 32.8k · MIT

Quick start

  1. 1Check prerequisites. Make sure Node.js and npm are installed on your machine.
  2. 2Choose a package. Use @floating-ui/dom for vanilla JavaScript, @floating-ui/react for React with interactions, @floating-ui/react-dom for React positioning only, or @floating-ui/vue for Vue.
  3. 3Install the package. Run npm install with the package name in your project folder.
  4. 4Follow the tutorial. Read the official tutorial, which builds a basic tooltip, to learn the basic setup.
  5. 5Consult the API docs. Use the computePosition API documentation as a reference while you build your component.

What Floating UI does

Floating elements are absolutely positioned and usually anchored to another UI element. Keeping them next to that anchor can be hard, especially inside scrolling containers. When a floating element is too close to the edge of the viewport, it can be obscured, which is called a collision. Floating UI adjusts the position so the element stays visible.

The library has two main features. The first is anchor positioning, which works on all platforms. The second is user interactions for React, which provides hooks and components for building accessible floating UI components.

Install Floating UI for your platform

You need Node.js and npm. Pick the package that matches your project. The vanilla DOM package is for plain JavaScript on the web.

  • Vanilla DOM: @floating-ui/dom
  • React DOM with positioning and interactions: @floating-ui/react
  • React DOM with positioning only (smaller size): @floating-ui/react-dom
  • React Native: @floating-ui/react-native
  • Vue: @floating-ui/vue
  • Canvas, WebGL or other platforms: @floating-ui/core, used with your own Platform
npm install @floating-ui/dom

Position your first floating element

The README points beginners to the official tutorial, which teaches the library by building a basic tooltip. Start there for a step-by-step walkthrough, then use the API documentation for the computePosition function as a reference.

For React projects, install @floating-ui/react if you want both positioning and interaction hooks, or @floating-ui/react-dom if you only need positioning.

npm install @floating-ui/react

Use Floating UI on non-DOM platforms

If you target a platform other than the vanilla DOM, React or React Native, you can build your own Platform. The README says this lets you support things like Canvas, WebGL, or other platforms that can run JavaScript. The core package is installed separately.

npm install @floating-ui/core

Run the project locally for contributing

The project is a monorepo written in TypeScript that uses pnpm workspaces. To work on it, fork and clone the repo, install dependencies in the root directory, and build the initial package dist files. The DOM and React playgrounds have their own dev commands.

  • Install dependencies in the root directory with pnpm install
  • Build initial package dist files with pnpm run build
  • Start the DOM visual tests with pnpm run --filter @floating-ui/dom dev, which runs at http://localhost:1234
  • Start the React tests with pnpm run --filter @floating-ui/react dev, which runs at http://localhost:1234
pnpm install pnpm run build

What people use it for

  • Tooltips that stay visible near the edge of the viewport
  • Popovers and dropdown menus anchored to a button
  • Floating elements inside scrolling containers
  • Accessible React components built with the interaction hooks
  • Positioning on Canvas or WebGL through a custom Platform

Frequently asked questions

How do I install floating-ui?

Run npm install @floating-ui/dom for vanilla JavaScript. For React, use npm install @floating-ui/react, and for Vue use npm install @floating-ui/vue. You need Node.js and npm installed.

Is floating-ui free to use?

Yes. The project is released under the MIT licence, as stated in the README.

What do I need to use floating-ui?

The README lists Node.js and npm as prerequisites. The library is used through code, so familiarity with npm and JavaScript frameworks is assumed.

Can I use floating-ui for a simple tooltip?

You can, but if you only need a static tooltip with no JavaScript, plain CSS may be enough. Floating UI adds a dependency for behaviour that plain CSS can sometimes cover.

Is floating-ui the same as Popper?

The README says Popper is now Floating UI. For Popper v2, it points to a dedicated branch and documentation, and it provides a Migration Guide for moving over.

What are alternatives to floating-ui?

The project lists Popper.js, Tippy.js and Radix UI as comparable projects. Compare them against your needs before choosing one.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Floating UI suits web developers building tooltips, popovers or dropdowns, especially teams that need positioning inside scrolling containers or React developers who want interaction hooks. If you only need a simple static tooltip or you are not comfortable with npm and JavaScript frameworks, choose a simpler CSS-based option or a ready-made component library instead.

Install options & downloads