Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Position Tooltips and Popovers using Popper.js
Popper.js is a JavaScript library used to build and manage poppers, tooltips, and popovers in web applications. It provides powerful positioning capabilities that automatically handle edge detection and placement calculations. In this tutorial, we'll create an interactive tooltip using Popper.js.
Setting Up Popper.js
First, include Popper.js in your project. We'll use the CDN version for simplicity:
<script src="https://unpkg.com/@popperjs/core@2"></script>
Basic HTML Structure
Create a button element (reference) and a tooltip element (popper). The tooltip will be positioned relative to the button:
<!DOCTYPE html>
<html>
<head>
<title>Popper Tooltip Example</title>
</head>
<body>
<button id="button" aria-describedby="tooltip">My button</button>
<div id="tooltip" role="tooltip">My tooltip</div>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script>
const myButton = document.querySelector('#button');
const myTooltip = document.querySelector('#tooltip');
const popperInstance = Popper.createPopper(myButton, myTooltip);
</script>
</body>
</html>
Adding Tooltip Styling
Style the tooltip to look professional with proper colors, padding, and initially hide it:
<!DOCTYPE html>
<html>
<head>
<title>Popper Tutorial</title>
<style>
body {
text-align: center;
margin: 50px auto;
font-family: Arial, sans-serif;
}
#button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#tooltip {
background: #333;
color: white;
font-weight: bold;
padding: 8px 12px;
font-size: 13px;
border-radius: 4px;
display: none;
z-index: 1000;
}
#tooltip[data-show] {
display: block;
}
</style>
</head>
<body>
<button id="button" aria-describedby="tooltip">Hover me</button>
<div id="tooltip" role="tooltip">Simple tooltip</div>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script>
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
const popperInstance = Popper.createPopper(button, tooltip);
</script>
</body>
</html>
Complete Interactive Tooltip
Here's the final implementation with arrow styling and interactive behavior:
<!DOCTYPE html>
<html>
<head>
<title>Interactive Popper Tooltip</title>
<style>
body {
text-align: center;
margin: 100px auto;
font-family: Arial, sans-serif;
}
#button {
padding: 12px 24px;
font-size: 16px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#tooltip {
background: #333;
color: white;
font-weight: bold;
padding: 8px 12px;
font-size: 13px;
border-radius: 4px;
display: none;
z-index: 1000;
}
#tooltip[data-show] {
display: block;
}
/* Arrow styling */
#arrow,
#arrow::before {
position: absolute;
width: 8px;
height: 8px;
background: inherit;
}
#arrow {
visibility: hidden;
}
#arrow::before {
visibility: visible;
content: '';
transform: rotate(45deg);
}
/* Arrow positioning based on tooltip placement */
#tooltip[data-popper-placement^='top'] > #arrow {
bottom: -4px;
}
#tooltip[data-popper-placement^='bottom'] > #arrow {
top: -4px;
}
#tooltip[data-popper-placement^='left'] > #arrow {
right: -4px;
}
#tooltip[data-popper-placement^='right'] > #arrow {
left: -4px;
}
</style>
</head>
<body>
<h1>Popper.js Tooltip Demo</h1>
<p>Hover over the button to see the tooltip:</p>
<button id="button" aria-describedby="tooltip">Hover me for tooltip</button>
<div id="tooltip" role="tooltip">
This is an interactive tooltip!
<div id="arrow" data-popper-arrow></div>
</div>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script>
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
// Create Popper instance with offset modifier
const popperInstance = Popper.createPopper(button, tooltip, {
placement: 'top',
modifiers: [{
name: 'offset',
options: {
offset: [0, 8],
},
}],
});
// Show tooltip function
function show() {
tooltip.setAttribute('data-show', '');
popperInstance.setOptions((options) => ({
...options,
modifiers: [
...options.modifiers,
{
name: 'eventListeners',
enabled: true
},
],
}));
popperInstance.update();
}
// Hide tooltip function
function hide() {
tooltip.removeAttribute('data-show');
popperInstance.setOptions((options) => ({
...options,
modifiers: [
...options.modifiers,
{
name: 'eventListeners',
enabled: false
},
],
}));
}
// Event listeners for showing/hiding tooltip
const showEvents = ['mouseenter', 'focus'];
const hideEvents = ['mouseleave', 'blur'];
showEvents.forEach((event) => {
button.addEventListener(event, show);
});
hideEvents.forEach((event) => {
button.addEventListener(event, hide);
});
</script>
</body>
</html>
Key Features Explained
Popper Creation: Popper.createPopper(referenceElement, popperElement, options) creates the positioning engine.
Placement Options: You can set placement to 'top', 'bottom', 'left', 'right', or their variations like 'top-start', 'bottom-end'.
Modifiers: The offset modifier adds spacing between the reference and popper elements.
Event Management: Enable/disable event listeners for performance optimization when showing/hiding tooltips.
Conclusion
Popper.js simplifies tooltip and popover positioning with automatic boundary detection and placement optimization. Use the data-show attribute pattern and proper event management for smooth interactive experiences.
3K+ Views
