Popper solves all of these key problems in an elegant, performant manner. It is a lightweight ~3 kB library that aims to provide a reliable and extensible positioning engine you can use to ensure all your popper elements are positioned in the right place.

The future of Popper is here! Floating UI is now available. Close Menu Search. Home; Popper; v2.×; Tutorial; Constructors; Lifecycle; Modifiers

import Popper from 'popper.js'; new Popper (reference, popper, options); In Popper 2, it's now a function: import { createPopper } from '@popperjs/core' ; createPopper ( reference , popper , options ) ;

react-popper is the official React wrapper to let you use Popper in your React projects. It exposes an API very similar to the one of the Vanilla JavaScript library, but it provides some useful addition to better integrate with React.

This page covers the API reference and documentation of Popper 1 (popper.js on npm). This page is here to help consumers who haven't migrated yet to the most recent version, for the latest version documentation click here .

It allows you to create individual popper instances (objects) with state and methods. Imports // esm import { createPopper } from '@popperjs/core' ; // cjs const { createPopper } = require ( '@popperjs/core' ) ; // umd const { createPopper } = Popper ;

In this tutorial you'll learn how to use Popper by building a basic tooltip. Remember, Popper is not a tooltip library, it's the foundation to build one! Follow the tutorial below to learn how to use Popper.

My popper is bigger than the viewport, what do I do? Here are some options: Prevent the popper's width from ever exceeding the browser's width with max-width: 100vw; CSS (along with box-sizing: border-box). Set preventOverflow's rootBoundary option to document if it must be larger than the viewport.

React Popper 2.×. The second major version of react-popper brings compatibility with Popper 2.x and introduces a new React Hook to use the library with modern React patterns.

Popper is built using an extensible core, which provides the foundation used to deliver all the functionalities offered by the library. All the useful functionalities provided by the library are implemented as Popper modifiers.