How to install Popper

Created
Modified

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.

Installation

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

Cloning a repository

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

Install via NPM package

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>