ai-agent

floating-ui: Easy Element Positioning

Name: floating-ui: Easy Element Positioning
Author: floating-ui

Get precise control over floating elements with floating-ui, a TypeScript library for startup founders. 33k+ GitHub stars

32,646 stars1,683 forksTypeScriptQuality 8/10Updated 7/3/2026100% free · open source

What it does

Floating-ui is a TypeScript library that provides precise control over floating elements, such as tooltips, popovers, and dropdowns, for web applications.

Install / run

npm install @floating-ui/dom

When to use it

•When developing custom UI components that require precise positioning and overlap management
•When integrating third-party libraries that require floating elements, such as date pickers or autocomplete inputs
•When creating complex, interactive web applications that require precise control over layout and positioning

Quick start

1Import the library in your TypeScript file: `import { computePosition } from '@floating-ui/dom';`
2Create a reference element, such as a button, and a floating element, such as a tooltip
3Use the `computePosition` function to calculate the position of the floating element: `const { x, y } = computePosition(referenceElement, floatingElement);`
4Update the styles of the floating element to position it correctly: `floatingElement.style.top = `${y}px`; floatingElement.style.left = `${x}px`;`
5Use the `update` method to re-calculate the position when the reference element changes: `computePosition(referenceElement, floatingElement).then(({ x, y }) => { ... })`

Ready-to-paste prompt

Compute the position of a tooltip element relative to a button element: `const { x, y } = computePosition(document.querySelector('#button'), document.querySelector('#tooltip'), { placement: 'top' })`

Heads up: Make sure to include the `@floating-ui/dom` package in your TypeScript configuration, as it requires the `dom` package to be installed and imported correctly, otherwise, you may encounter errors related to missing types or modules.

Saves to your device