# Floating UI — Low-Level Positioning Engine for Tooltips, Popovers, and Dropdowns

> A tiny library for anchoring floating elements like tooltips, popovers, and dropdowns to reference elements with automatic placement, collision detection, and overflow handling.

## Install

Save in your project root:

# Floating UI — Low-Level Positioning Engine for Tooltips, Popovers, and Dropdowns

## Quick Use
```bash
npm install @floating-ui/dom
```
```js
import { computePosition, flip, offset } from "@floating-ui/dom";
computePosition(referenceEl, floatingEl, {
  placement: "top",
  middleware: [offset(8), flip()]
}).then(({ x, y }) => {
  Object.assign(floatingEl.style, { left: `${x}px`, top: `${y}px` });
});
```

## Introduction
Floating UI is a low-level positioning library that solves the hard problem of anchoring floating elements (tooltips, popovers, dropdowns, menus) to trigger elements. It handles collision detection, overflow prevention, and dynamic repositioning so the floating element always stays visible and properly aligned.

## What Floating UI Does
- Calculates optimal x/y coordinates for positioning a floating element relative to a reference element
- Detects viewport and container overflow and flips or shifts placement automatically
- Provides middleware architecture for composing offset, arrow, size, and shift behaviors
- Supports virtual elements for positioning against cursors, selections, or arbitrary coordinates
- Ships framework bindings for React, Vue, and vanilla DOM

## Architecture Overview
Floating UI uses a middleware pipeline architecture. The core `computePosition` function takes a reference element, a floating element, and an ordered array of middleware. Each middleware (flip, shift, offset, arrow, size) reads and modifies the positioning state in sequence. This design keeps the core under 1KB while letting users opt into only the behaviors they need. Platform adapters abstract DOM measurements, enabling the library to work in React Native and other environments.

## Self-Hosting & Configuration
- Install the DOM package for vanilla JS or the React/Vue package for framework integration
- Call `computePosition()` with a reference element and a floating element
- Add middleware in order: `offset` for spacing, `flip` for overflow, `shift` for edge alignment
- Use `autoUpdate()` to reposition on scroll, resize, or DOM mutation events
- For React, use the `useFloating()` hook which manages refs and positioning automatically

## Key Features
- Tiny core (~1KB gzipped) with tree-shakable middleware for minimal bundle impact
- Platform-agnostic design works in DOM, React Native, and custom rendering environments
- Middleware pipeline lets you compose exactly the positioning behaviors you need
- Handles complex scenarios like nested scrolling containers and virtual reference elements
- Successor to Popper.js with a cleaner API and smaller footprint

## Comparison with Similar Tools
- **Popper.js** — predecessor to Floating UI; larger API surface and no longer actively developed
- **Tippy.js** — full tooltip library built on Floating UI; includes styling and animations
- **Radix UI Popover** — complete accessible popover component; uses Floating UI internally
- **Headless UI Popover** — accessible popover for Tailwind; higher-level abstraction
- **CSS Anchor Positioning** — native browser API; limited browser support as of 2025

## FAQ
**Q: Is Floating UI the successor to Popper.js?**
A: Yes. Floating UI was created by the same author as Popper.js and is its recommended replacement with a smaller, more modular API.

**Q: How big is Floating UI?**
A: The core is about 0.6KB gzipped. With common middleware (flip, shift, offset), the total is around 2-3KB.

**Q: Does Floating UI handle animations?**
A: Floating UI focuses on positioning only. For enter/exit animations, use CSS transitions, Framer Motion, or a tooltip library like Tippy.js that wraps Floating UI.

**Q: Can I use Floating UI with React?**
A: Yes. The `@floating-ui/react` package provides a `useFloating()` hook and interaction primitives for building accessible floating components.

## Sources
- https://github.com/floating-ui/floating-ui
- https://floating-ui.com/

---
Source: https://tokrepo.com/en/workflows/f70843e3-3ead-11f1-9bc6-00163e2b0d79
Author: AI Open Source