@popperjs/core 's direct dependencies. Data on all dependencies, including transitive ones, is available via CSV download.| Name | Version | Size | License | Type | Vulnerabilities |
|---|
@popperjs/core is a JavaScript library that offers a robust solution to handle the positioning of tooltips and popovers in your UI. These elements are difficult to manage as they are meant to "pop out" of the general flow of the document and float near a specific target. This is where Popper steps in by providing an automated and reliable way to place these elements correctly relative to their referred objects.
You can use @popperjs/core by installing it through npm or Yarn. For npm, you just need to run npm i @popperjs/core in your project's root directory. If you're using Yarn, the command would be yarn add @popperjs/core. Once the package is installed, you can import it into your JavaScript file. Here's an example:
import { createPopper } from '@popperjs/core';
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
createPopper(button, tooltip, {
placement: 'right',
});
In this code snippet, we are creating a popper instance for a button and a tooltip. The createPopper() function is responsible for generating the popper. It takes three arguments: the button (button), the tooltip (tooltip), and an options object where we set the placement of the tooltip to 'right'.
The complete documentation for @popperjs/core can be found on the official website. There are two versions available, version 2.x (latest) and version 1.x. You can find everything from basic information to advanced concepts about the library in these docs. There's also a migration guide available to help you migrate from Popper 1 to Popper 2.
