Bootstrap Popover
A popover is like a bigger, richer tooltip. It can show a title and a longer body of text, and by default it opens on click rather than on hover. Popovers are perfect for short help panels, tips, or extra details that would be too long for a tooltip.
What Is a Popover?
A popover is a small overlay box that appears next to an element when the user interacts with it. Unlike a tooltip, a popover has room for both a heading and a paragraph of content, making it well suited for richer explanations.
Creating a Basic Popover
Mark the trigger element with data-bs-toggle="popover". Use data-bs-title for the heading and data-bs-content for the body text. A button is the most common trigger.
A button with a popover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-primary"
data-bs-toggle="popover"
data-bs-title="Popover title"
data-bs-content="And here is some helpful popover content.">
Click to toggle popover
</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(el => new bootstrap.Popover(el));
</script>
</body>
</html>Initializing Popovers with JavaScript
Just like tooltips, popovers need a short script to activate them. Add this after the Bootstrap bundle so that every popover trigger on the page becomes interactive.
Enable all popovers on the page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(el => new bootstrap.Popover(el));
</script>
</body>
</html>Placement and Trigger Options
You can control where a popover appears with data-bs-placement, and how it opens with data-bs-trigger. The table below lists the values you will use most often.
A hover popover placed on the right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-secondary"
data-bs-toggle="popover"
data-bs-placement="right"
data-bs-trigger="hover"
data-bs-title="Quick tip"
data-bs-content="This popover opens on hover instead of click.">
Hover me
</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(el => new bootstrap.Popover(el));
</script>
</body>
</html>Exercise: Bootstrap Popover
What is the key structural difference between a Bootstrap popover and a tooltip?
