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

The README file is missing