Popper.js is an incredibly versatile open-source library that provides powerful positioning engines for tooltips, popovers, drop-downs, and a whole range of other web elements. Its strength lies in how it quickly and effectively handles complex calculations, whilst offering highly customizable options for developers. Whether you’re an experienced Javascript dev, or just starting out, introducing Popper.js to your set of tools could be a game-changer.
Installing Popper.js
Popper.js can be quickly installed via various methods, the popular ones being CDN and NPM.
// via CDN <script src="https://unpkg.com/@popperjs/core@2"></script> // via NPM npm install @popperjs/core
The library is modular, meaning you can import only what you need, reducing the final bundle size for your project.
Utilizing Popper.js in Your Code
Now that we have Popper.js installed, we can start realizing its potential within our application. Let’s walk through a step-by-step process to implement a basic tooltip using Popper.js.
First, consider the html:
<button id="button" aria-describedby="tooltip">Hover me</button> <div id="tooltip" role="tooltip">I'm a Tooltip</div>
In our Javascript file, we’re going to instantiate a Popper instance:
import { createPopper } from '@popperjs/core';
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
createPopper(button, tooltip);
Above, we first import the createPopper function from our library. Then, we select our button and tooltop elements from the DOM, and call createPopper on them. This automatically does the positioning calculations and applies the styles to tooltip.
A Closer Look at createPopper Function
The ‘createPopper’ function is the heart of Popper.js and includes two mandatory arguments: the reference element and the popper element.
– The reference element is the element on which your Popper tooltip will be positioned – in the above example, our button.
– The popper element is the tooltip or popover itself – in the above example, it’s our tooltip.
After passing these as arguments into createPopper(), it takes care of providing the necessary styles to your tooltip, allowing it to ‘pop’ at the correct position in relation to the button.
Popper.js is a lightweight, yet powerful library that can significantly enhance user experience. It takes a lot of pain out of managing tooltips and popovers, which allows us, the developers, to focus on other important aspects of the application. So, if you are looking to better manage overlays of any kind in your applications, definitely give Popper.js a shot!
