How to install Popper

Created Mar 2, 2021 at 9:42

Modified Mar 2, 2021 at 11:15

Given an element, such as a button, and a tooltip element describing it, Popper will automatically put the tooltip in the right place near the button.

It will position any UI element that "pops out" from the flow of your document and floats near a target element. The most common example is a tooltip, but it also includes popovers, drop-downs, and more. All of these can be generically described as a "popper" element.

Popper is used in popular libraries like Bootstrap, Foundation, Material UI, and more. It's likely you've already used popper elements on the web positioned by Popper at some point in the past few years.

You can download the latest version of Popper from the GitHub releases or use a Popper CDN.

You can clone a repository from GitHub.com to your local computer.

Cloning with HTTPS URLs

git clone https://github.com/popperjs/popper-core.git

Cloning with SSH URLs

git clone [email protected]:popperjs/popper-core.git

Cloning with GitHub CLI

gh repo clone popperjs/popper-core

Run the following command to locally install the package and its dependencies with NPM.

Downloading and installing packages locally

npm i @popperjs/core

npm install @popperjs/core

yarn add @popperjs/core

Downloading and installing packages globally

npm i -g @popperjs/core

yarn global add @popperjs/core

Install Specific Version of a Package

npm install @popperjs/[email protected]

yarn add @popperjs/[email protected]

Bower

bower install @popperjs/core

Example

Code 1: - The most straightforward way to get started is to import Popper from the unpkg CDN, which includes all of its features. You can call the Popper.createPopper constructor to create new popper instances.

<!DOCTYPE html>
<title>Popper example</title>

<style>
  #tooltip {
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 13px;
  }
</style>

<button id="button" aria-describedby="tooltip">I'm a button</button>
<div id="tooltip" role="tooltip">I'm a tooltip</div>

<script src="https://unpkg.com/@popperjs/core"></script>
<script>
  const button = document.querySelector('#button');
  const tooltip = document.querySelector('#tooltip');

  // Pass the button, the tooltip, and some options, and Popper will do the
  // magic positioning for you:
  Popper.createPopper(button, tooltip, {
    placement: 'right',
  });
</script>