Floating UI Positioning Library

Floating UI is a library for positioning floating elements such as tooltips, popovers, dropdown menus, comboboxes, and context menus relative to a reference element on the page. The core engine computes the optimal coordinates for the floating element by measuring the positions and dimensions of both the reference and floating elements through the DOM API, then applying mathematical placement calculations that account for the specified placement side, offset distance, and alignment strategy. Middleware functions compose the positioning pipeline: offset adjusts the distance between elements, shift prevents the floating element from overflowing the viewport boundary by clamping coordinates, flip reverses the placement when insufficient space is detected, autoPlacement selects the placement with the most available space, and inline handles inline elements that span multiple lines. The library also handles arrow positioning, element resizing through ResizeObserver, scroll tracking through scroll event listeners, and anchor interactions that update position in response to DOM mutations. A virtual elements feature enables positioning floating elements relative to coordinates rather than DOM nodes, useful for cursor-triggered tooltips and selection-based context menus. The framework-agnostic core is tree-shakeable at approximately one kilobyte for the positioning engine, with React and Vue wrapper packages that provide hooks and components integrating with the respective reactivity systems for automatic re-positioning. The React package uses refs and effects to manage the floating element lifecycle, and supports controlled and uncontrolled open-close state, focus and hover interactions, and type-ahead keyboard navigation for combobox and menu patterns. Accessibility helpers generate ARIA attributes and keyboard event handlers following WAI-ARIA patterns.