Popperjs

Popper.js is a JavaScript library for positioning popper elements such as tooltips, popovers, and dropdowns relative to a reference element in web pages. It provides a robust positioning engine that calculates the optimal placement while responding to scrolling, resizing, and dynamic content. The goal is to keep the popper visible and properly aligned across different screen sizes and layouts.

Core concepts include a reference element and a popper element, a placement option (top, bottom, left, right with optional start or end alignments), and a modular modifier system that adjusts behavior. The engine evaluates constraints such as boundaries and overflow and applies transforms to the popper to keep it in view. Common modifiers include offset (to offset the popper from the reference), flip (to switch placements to avoid overflow), preventOverflow, and arrow (to position an arrow element).

Usage involves the API that exposes createPopper(referenceElement, popperElement, options) to instantiate a popper; the resulting instance provides update and destroy methods. Popper.js can be used directly or via framework wrappers and is a dependency in many UI projects for tooltip and popover functionality.

Versions and ecosystem: Popper.js has evolved into a modular core with a v2 line published as @popperjs/core. The project is maintained by an open-source community on GitHub and is released under the MIT license. It is widely adopted by UI frameworks and component libraries, including integration with Bootstrap and various React and Vue tooling, due to its flexible and reliable positioning engine.