DownloadA JavaScript library for anchor positioning, anchor a floating element next to another element while making sure it stays in view optimally. This lets you position tooltips, popovers, or dropdowns to efficiently float on top of the UI! This positioning toolkit has a platform-agnostic 0.6 kB core (minified + Brotli compressed), with official bindings for the web, React DOM, React Native, and Vue. In addition to positioning, there are also interaction primitives to build floating UI components with React. This includes event hooks for hover, focus or click, modal and non-modal focus management, keyboard list navigation, typeahead, portals, backdrop overlays, screen reader support, and more. Floating elements are absolutely positioned, typically anchored to another UI element. Ensuring a floating element remains anchored next to another element can be challenging, especially in unique layout contexts like scrolling containers.
Features
- Places your floating element relative to another element
- Shifts your floating element to keep it in view
- Changes the placement of your floating element to keep it in view
- Changes the size of your floating element to keep it in view
- Dynamically positions an arrow element that is center-aware
- Anchor relative to any coordinates, such as your mouse cursor
Project Samples
