A library used to position poppers in web applications.
## 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 information 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 into 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)
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) |
\*: Bower isn't officially supported, it can be used to install Tooltip.js only through 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 suggest using 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.
Have no idea what am I talking about? You are looking for UMD probably.
- 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 `