Popper.js

Popper.js

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!

https://popper.js.org/

npm install popper.js --save

Usage

Given an existing popper DOM node, ask Popper.js to position it near its button.

var reference = document.querySelector('.my-button');
var popper = document.querySelector('.my-popper');
var anotherPopper = new Popper(reference, popper, {
  // popper options here
});

Callbacks

Popper.js supports two kinds of callbacks; the onCreate callback is called after the popper has been initialized. The onUpdate one is called on any subsequent update.

const reference = document.querySelector('.my-button');
const popper = document.querySelector('.my-popper');
new Popper(reference, popper, {
  onCreate: data => {
    // data is an object containing all the informations computed
    // by Popper.js and used to style the popper and its arrow
    // The complete description is available in Popper.js documentation
  },
  onUpdate: data => {
    // same as `onCreate` but called on subsequent updates
  },
});

Tooltip.js

It is a subset of Popper.js

Tooltip.js can create, show, hide and toggle tooltips. Its API is almost identical to the one used by Bootstrap for their tooltips, if you know Bootstrap, you already know Tooltip.js!

npm install tooltip.js --save