Popper.js – A kickass library to manage your Poppers

Popper.JS

Popper.JS is a positioning engine written in plain vanilla JavaScript. It perfectly fits into your Tooltip, Popover or Dropdown script. The script itself also runs completely dependency-free and is with 7 kB also lightweight enough. It is compatible with all modern browsers including the 10+.

This function library is completely customizable, and supports also Shadow DOM elements. It works also seemless with React and other View libraries and keeps the elements in their original DOM Context.

Download the latest version of Popper.js as .ZIP or as .TAR package!

npm i popper.js --save

yarn add popper.js --save

bower install popper.js --save

Instructions

The package itself is filled with JavaScript files, and each single file is also available in a minified version AND with a respective Source Map. The AMD / UMD Module- and ECMAScript (ES) Module-Written version are separated into an files (within a sub-directory).

 

Load Popper.js

Just link the main JavaScript file directly after the opened <body> tag and append your own Script below.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/popper.min.js"></script>
    </body>
</html>

 

Configure Popper.js

The library is perfect to write an own Script around it, but Popper.js already offers the following 7 settings. It is highly recommended to check out the official documentation to create your own apps using Popper.JS.

document.addEventListener("DOMContentLoaded", {
    var element  = document.querySelector(".popper-reference"),
        myPopper = document.querySelector(".popper-element");
    
    var popper = new Popper(element, myPopper, {
        placement:          "bottom",
        positionFixed:      false,
        eventsEnabled:      true,
        removeOnDestroy:    false,
        modifiers:          false,
        onCreate:           function(){ },
        onUpdate:           function(){ }
    });
});

 

Configure: Options

placement
Popper’s placement.
positionFixed
Set this to true if you want popper to position it self in fixed mode
eventsEnabled
Whether events (resize, scroll) are initially enabled.
Set to true
modifiers
List of modifiers used to modify the offsets before they are applied to the popper. They provide most of the functionalities of Popper.js.
onCreate
Callback called when the popper is created. By default, it is set to no-op. Access Popper.js instance with data.instance.
onUpdate
Callback called when the popper is updated. This callback is not called on the initialization/creation of the popper, but only on subsequent updates. By default, it is set to no-op. Access Popper.js instance with data.instance.

One thought on “Popper.js – A kickass library to manage your Poppers

Leave a Reply