Popper.js

A library used to position poppers in web applications.

Stable Release Size

## Wut? Poppers? A popper is an element on the screen which "pops out" from the natural flow of your application. Common examples of poppers are tooltips, popovers and drop-downs. ## So, yet another tooltip library? Well, basically, **no**. Popper.js is a **positioning engine**, its purpose is to calculate the position of an element to make it possible to position it near a given reference element. The engine is completely modular and most of its features are implemented as **modifiers** (similar to middlewares or plugins). The whole code base is written in ES2015 and its features are automatically tested on real browsers thanks to [SauceLabs](https://saucelabs.com/) and [TravisCI](https://travis-ci.org/). Popper.js has zero dependencies. No jQuery, no LoDash, nothing. It's used by big companies like [Twitter in Bootstrap v4](https://getbootstrap.com/), [Microsoft in WebClipper](https://github.com/OneNoteDev/WebClipper) and [Atlassian in AtlasKit](https://aui-cdn.atlassian.com/atlaskit/registry/). ### Popper.js This is the engine, the library that computes and, optionally, applies the styles to the poppers. Some of the key points are: - Position elements keeping them in their original DOM context (doesn't mess with your DOM!); - Allows to export the computed informations to integrate with React and other view libraries; - Supports Shadow DOM elements; - Completely customizable thanks to the modifiers based structure; Visit our [project page](https://fezvrasta.github.io/popper.js) to see a lot of examples of what you can do with Popper.js! Find [the documentation here](/docs/_includes/popper-documentation.md). ### Tooltip.js Since lots of users just need a simple way to integrate powerful tooltips in their projects, we created **Tooltip.js**. It's a small library that makes it easy to automatically create tooltips using as engine Popper.js. Its API is almost identical to the famous tooltip system of Bootstrap, in this way it will be easy to integrate it in your projects. The tooltips generated by Tooltip.js are accessible thanks to the `aria` tags. Find [the documentation here](/docs/_includes/tooltip-documentation.md). ## Installation Popper.js is available on the following package managers and CDNs: | Source | | |:-------|:---------------------------------------------------------------------------------| | npm | `npm install popper.js --save` | | yarn | `yarn add popper.js` | | NuGet | `PM> Install-Package popper.js` | | Bower | `bower install popper.js --save` | | unpkg | [`https://unpkg.com/popper.js`](https://unpkg.com/popper.js) | | cdnjs | [`https://cdnjs.com/libraries/popper.js`](https://cdnjs.com/libraries/popper.js) | Tooltip.js as well: | Source | | |:-------|:---------------------------------------------------------------------------------| | npm | `npm install tooltip.js --save` | | yarn | `yarn add tooltip.js` | | Bower* | `bower install tooltip.js=https://unpkg.com/tooltip.js --save` | | unpkg | [`https://unpkg.com/tooltip.js`](https://unpkg.com/tooltip.js) | | cdnjs | [`https://cdnjs.com/libraries/popper.js`](https://cdnjs.com/libraries/popper.js) | \*: Bower isn't officially supported, it can be used to install Tooltip.js only trough the unpkg.com CDN. This method has the limitation of not being able to define a specific version of the library. Bower and Popper.js suggests to use npm or Yarn for your projects. For more info, [read the related issue](https://github.com/FezVrasta/popper.js/issues/390). ### Dist targets Popper.js is currently shipped with 3 targets in mind: UMD, ESM and ESNext. - UMD - Universal Module Definition: AMD, RequireJS and globals; - ESM - ES Modules: For webpack/Rollup or browser supporting the spec; - ESNext: Available in `dist/`, can be used with webpack and `babel-preset-env`; Make sure to use the right one for your needs. If you want to import it with a `