npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

m-popperjs

v0.0.0

Published

A kickass library to manage your poppers

Downloads

3

Readme

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 and TravisCI.

Popper.js has zero dependencies. No jQuery, no LoDash, nothing.
It's used by big companies like Twitter in Bootstrap v4, Microsoft in WebClipper and Atlassian in AtlasKit.

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 to see a lot of examples of what you can do with Popper.js!

Find the documentation here.

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.

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 | | cdnjs | 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 | | cdnjs | 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.

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 <script> tag, use UMD.

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 initalized. 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
    }
});

Writing your own modifiers

Popper.js is based on a "plugin-like" architecture, most of its features are fully encapsulated "modifiers".
A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks.

To learn how to create a modifier, read the modifiers documentation

React, Vue.js, Angular, AngularJS, Ember.js (etc...) integration

Integrating 3rd party libraries in React or other libraries can be a pain because they usually alter the DOM and drive the libraries crazy.
Popper.js limits all its DOM modifications inside the applyStyle modifier, you can simply disable it and manually apply the popper coordinates using your library of choice.

For a comprehensive list of libraries that let you use Popper.js into existing frameworks, visit the MENTIONS page.

Alternatively, you may even override your own applyStyles with your custom one and integrate Popper.js by yourself!

function applyReactStyle(data) {
    // export data in your framework and use its content to apply the style to your popper
};

const reference = document.querySelector('.my-button');
const popper = document.querySelector('.my-popper');
new Popper(reference, popper, {
    modifiers: {
        applyStyle: { enabled: false },
        applyReactStyle: {
            enabled: true,
            fn: applyReactStyle,
            order: 800,
        },
    },
});

Migration from Popper.js v0

Since the API changed, we prepared some migration instructions to make it easy to upgrade to Popper.js v1.

https://github.com/FezVrasta/popper.js/issues/62

Feel free to comment inside the issue if you have any questions.

Performances

Popper.js is very performant. It usually takes 0.5ms to compute a popper's position (on an iMac with 3.5G GHz Intel Core i5).
This means that it will not cause any jank, leading to a smooth user experience.

Notes

Libraries using Popper.js

The aim of Popper.js is to provide a stable and powerful positioning engine ready to be used in 3rd party libraries.

Visit the MENTIONS page for an updated list of projects.

Credits

I want to thank some friends and projects for the work they did:

  • @AndreaScn for his work on the GitHub Page and the manual testing he did during the development;
  • @vampolo for the original idea and for the name of the library;
  • Sysdig for all the awesome things I learned during these years that made it possible for me to write this library;
  • Tether.js for having inspired me in writing a positioning library ready for the real world;
  • The Contributors for their much appreciated Pull Requests and bug reports;
  • you for the star you'll give to this project and for being so awesome to give this project a try 🙂

Copyright and license

Code and documentation copyright 2016 Federico Zivolo. Code released under the MIT license. Docs released under Creative Commons.