Easily position tooltips, popovers or anything
with just a line of code!

Trust us, managing poppers can be a pain, we have learned it the hard way!
For this reason we have created Popper.js, your new best friend.

Popper.js is just ~6KB minified and gzipped, zero dependencies.
Its code base is in ES6 and is automatically tested against several browsers.
If this is not enough, it plays super nicely with React, AngularJS and more!


Choose where to put your popper!

Popper on

Popper on your side!

What are you waiting for? Select a popper from that dropdown.
Placing poppers around elements is just that easy!

var popper = new Popper(referenceElement, onPopper, {
    placement: 'position'

Drag me

on the edges

Flipping popper

which never flips to right

Custom flip behavior

Try dragging the reference element on the left side, its popper will move on its bottom edge. Then, try to move the reference element on the bottom left corner, it will move on its top edge.

var popper = new Popper(referenceElement, onLeftPopper, {
    placement: 'left',
    modifiers: {
        flip: {
            behavior: ['left', 'bottom', 'top']
        preventOverflow: {
            boundariesElement: container,

Scroll me

up and down

I follow it

staying between boundaries

Popper on scrolling container

In this example we have a relative div which contains a div with overflow: scroll.
Inside it, there are our popper and reference elements.

var popper = new Popper(referenceElement, onLeftPopper, {
    placement: 'left',


Shifted popper

on start

Shifted popper

on end

Shifted poppers

Shift your poppers on start or end of its reference element side.

var shiftStart = new Popper(referenceElement, shiftStartPopper, {
    placement: 'left-start',

var shiftEnd = new Popper(referenceElement, shiftEndPopper, {
    placement: 'bottom-end',


on the bottom

Popper on bottom

Flips when hits viewport

Viewport boundaries

By default, poppers use as boundaries the page viewport.
Scroll the page to see the popper flip when hits the page viewport margins.

var popper = new Popper(referenceElement, onBottomPopper, {
    placement: 'bottom'


We know, every popper has its own story. You must be able to fully customize
its behavior with ease. We have prepared a set of awesome options to satisfy your needs!

But they will never be enough, for this reason, Popper.js supports plugins (we call them "Modifiers")

  • Placements

    You decide where the popper will stay, choose between the four sides of your reference element and shift it on the start or at the end of it.

  • Custom Boundaries

    We don't want your poppers to get lost. Give them some boundaries to make sure they will stay within them.

  • Flip and Move

    What if your popper hits walls? Will it act like a ghost, passing through it, or will it change side of its reference element? It's up to you.

  • Arrows

    Poppers have arrows, usually.
    We take care of them making sure they stay in the right place: between popper and reference element.

  • Fixed or Absolute?

    We automatically detect when your popper should be absolutely positioned or fixed. Don't worry about that!

  • Blazing fast!

    No lag, period. Each position update takes almost no time to refresh your poppers. No compromises.

  • Offsets

    When you need surgical precision about the position of your popper, set an offset to it to shift it by the given amount of pixels.

  • Modifiers

    Our plugin system allows you to add any kind of feature to Popper.js.
    Most of the built-in behaviors are written as modifiers!

UI Tools using Popper.js

Looking for some real life examples of UI Kits, Dashboards and Design Systems that are implementing Popper.js? Try these hand picked Free & Premium products!

Premium Bootstrap 4 Admin - $79
Premium Bootstrap 4 Material Admin - $49
Premium Bootstrap 4 Admin - $49
View More Examples

Ready to start?

Visit our GitHub page to know how to get Popper.js and to learn more about it.