floating-ui/floating-ui
Floating Ui
Floating UI is a JavaScript positioning library and layout engine designed to calculate the exact coordinates for floating interface elements such as tooltips, popovers, and dropdowns. It functions as a floating element orchestrator that ensures these components remain visible and aligned relative to a reference element.
The library features a platform-abstraction layer that decouples positioning logic from the document object model. This allows the engine to support both standard web environments and non-DOM targets, including canvas or graphics buffers, through custom coordinate and measurement implementations.
The system provides tools for managing spatial constraints and alignment rules, including collision detection and a middleware-based pipeline for adjusting coordinates. It also includes a dedicated debugger for inspecting and refining the placement of floating elements during the layout process.
Features
- Floating Element Positioning - Calculates coordinates for tooltips and popovers to ensure they remain visible and aligned relative to reference elements.
- Cross-Platform Positioning Engines - Offers a positioning system that supports both standard web environments and non-DOM targets like graphics buffers.
- Element Positioning Utilities - Ships a comprehensive set of utilities for calculating the screen coordinates of floating elements relative to references.
- Positioning Engines - Provides a dedicated engine for calculating precise screen coordinates for floating interface elements.
- Reference-Anchor Models - Maps floating elements to target reference anchors using specific spatial constraints and alignment rules.
- Non-DOM Renderers - Allows the definition of custom coordinate and measurement logic for rendering in canvas or graphics buffers.
- Cross-Platform Abstraction Layers - Decouples positioning logic from the DOM to support various rendering environments through a unified interface.
- Positioning Pipelines - Uses a pluggable middleware pipeline to process coordinate adjustments for flipping and shifting.
- Accessible Interaction Patterns - Ensures floating components like tooltips and dropdowns remain interactive and correctly positioned across various layouts.
- Custom Component Placement - Enables positioning of floating elements in non-DOM environments like canvas or graphics buffers.
- Platform Interfaces - Provides a positioning interface to manage floating element logic in non-standard document environments.
- Collision Detection - Implements collision detection to ensure floating elements remain within the visible screen area.
- General Libraries - Toolkit for positioning floating elements like tooltips and menus.
- Utilities and Helpers - Library for positioning floating elements like tooltips and popovers.
