@popperjs/core

What is @popperjs/core?

The @popperjs/core package is a powerful positioning engine that allows developers to position elements on a webpage in relation to a reference element. This is particularly useful for creating tooltips, popovers, dropdowns, and more, ensuring they are positioned correctly regardless of viewport size or element positioning.

What are @popperjs/core's main functionalities?

Creating a Tooltip

This code sample demonstrates how to create a simple tooltip positioned to the right of a button. It uses the `createPopper` function from @popperjs/core to dynamically position the tooltip element in relation to the button element.

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

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

createPopper(button, tooltip, {
  placement: 'right',
});

Modifying Popper Behavior with Modifiers

This example shows how to use modifiers to adjust the behavior of a Popper instance. Here, the 'offset' modifier is used to add some space between the reference element and the popper element, specifically 8 pixels along the y-axis.

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

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

Other packages similar to @popperjs/core

tippy.js

Tippy.js is a highly customizable tooltip and popover library that wraps around Popper.js. It offers a simpler API for common tooltip and popover scenarios, making it easier to use out of the box compared to @popperjs/core, which offers more low-level control.

floating-ui

Floating UI is a low-level library for creating floating elements, tooltips, dropdowns, and more, similar to @popperjs/core. It provides a core set of utilities for positioning and updating the UI elements, with a focus on extensibility and customization.

README

Positioning tooltips (but also dropdowns, popovers, and more) has always been particularly painful. Popper is here to help.

Give it a reference element (such as a button) and a popper element (your tooltip) and it will automatically put your tooltip in the right place.

Popper is a ~3 kB library that aims to provide a reliable and extensible positioning engine you can use to build your awesome UI. Why waste your time writing your own logic every time you are programming a tooltip?

This library can position any pair of elements in your document without needing to alter the DOM in any way. It doesn't care if your elements are not close to each other or are in two different scrolling containers, they will always end up in the right position.

But wait, it's not 1993 anymore, nowadays we write UIs using powerful abstraction libraries such as React or Angular. You'll be glad to know Popper can fully integrate with them and be a good citizen together with your other components. Check out react-popper for the official Popper wrapper for React.

Installation:

# With Yarn package mnager
yarn add @popper/core@next

# With npm
npm install @popper/core@next

Usage

// Get your elements
const element = document.querySelector('#button');
const popper = document.querySelector('#tooltip');

// Let Popper do the magic!
new Popper(element, popper, { placement: 'right' });

Hacking the library

If you want to play with the library, implement new features, fix a bug you found, or simply experiment with it, this section is for you!

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.