popper.js

What is popper.js?

The popper.js npm package is a library used for managing poppers in web applications. Poppers are elements on the screen that 'pop out' from the flow of the document and float near a target element. The library is commonly used for tooltips, popovers, dropdowns, and similar components that require positioning near a reference element.

What are popper.js's main functionalities?

Positioning tooltips

This code sample demonstrates how to create a popper instance to position a tooltip above a button. The 'createPopper' function from popper.js is used to bind the tooltip to the button with a placement option set to 'top'.

import { createPopper } from '@popperjs/core';

const tooltip = document.querySelector('#tooltip');
const button = document.querySelector('#button');

const popperInstance = createPopper(button, tooltip, {
  placement: 'top',
});

Creating dropdowns

This code sample shows how to use popper.js to create a dropdown menu that appears below the start of a reference element. The 'createPopper' function is used to attach the dropdown to the reference element.

import { createPopper } from '@popperjs/core';

const dropdown = document.querySelector('#dropdown');
const referenceElement = document.querySelector('#referenceElement');

const popperInstance = createPopper(referenceElement, dropdown, {
  placement: 'bottom-start',
});

Modifying popper behavior with modifiers

This example illustrates how to use modifiers to alter the behavior of a popper. Here, an 'offset' modifier is added to provide a gap between the popper and the reference element.

import { createPopper } from '@popperjs/core';

const popper = document.querySelector('#popper');
const referenceElement = document.querySelector('#referenceElement');

const popperInstance = createPopper(referenceElement, popper, {
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 8],
      },
    },
  ],
});

Other packages similar to popper.js

tippy.js

Tippy.js is a highly customizable tooltip and popover library powered by popper.js. It provides a simpler API for creating tooltips and popovers and includes additional features like animations and themes. It is built on top of popper.js and abstracts some of the complexity involved in creating poppers.

tooltip.js

Tooltip.js is another library for creating and managing tooltips in web applications. It is also built on top of popper.js and provides a simpler interface for creating tooltips. However, it is less feature-rich compared to tippy.js and focuses mainly on tooltip functionality.

floating-ui

Floating UI is a low-level library for positioning floating elements. It is the successor to popper.js and provides more advanced features and better performance. It offers a more modular approach, allowing developers to import only the parts they need.

README

PopperJS

Hacking the library

First of all, make sure to have Yarn installed.

Install the development dependencies:

yarn install

And run the development environment:

yarn dev

Then, simply open one the development server web page:

# macOS and Linux
open localhost:5000

# Windows
start localhost:5000

From there, you can open any of the examples (.html files) to fiddle with them.

Now any change you will made to the source code, will be automatically compiled, you just need to refresh the page.

If the page is not working properly, try to go in "Developer Tools > Application > Clear storage" and click on "Clear site data".
To run the examples you need a browser with JavaScript modules via script tag support.