Bootstrap 5 Popover
Display rich content in overlay boxes
📋 What is Bootstrap Popover?
Popovers are larger overlay boxes that display when you click an element. Unlike tooltips, they can contain titles, longer text, and more complex content for detailed information.
<!-- Basic Popover Example -->
<button type="button" class="btn btn-primary"
data-bs-toggle="popover"
title="Popover Title"
data-bs-content="This is the popover content!">
Click me
</button>
Key Popover Features
Title & Content
Popovers support both a title header and body content, allowing you to organize information clearly with headings and detailed descriptions for better user understanding.
Click Trigger
Activated by clicking instead of hovering, giving users more control over when information appears and preventing accidental popover displays during normal browsing.
Dismissible
Users can easily close popovers by clicking outside or on a close button, providing a clean and intuitive way to manage screen space and information visibility.
Flexible
Supports HTML content, custom styling, and various trigger options including hover, focus, and manual control for maximum flexibility in different use cases and scenarios.
🔹 Basic Popover Setup
Click the button to trigger a popover that demonstrates real-time interactive feedback. This example shows how popovers can deliver additional content like instructions, definitions, or extended descriptions on demand. By keeping secondary information hidden until needed, popovers help maintain a clean, uncluttered interface while providing users with instant access to relevant details exactly when they need it.
<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Popover Button -->
<button type="button" class="btn btn-danger"
data-bs-toggle="popover"
title="Popover Title"
data-bs-content="Here is some amazing content for the popover body!">
Click for Popover
</button>
<!-- Include Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Initialize Popovers -->
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>Output:
Click the button to see the popover
🔹 Popover Positions
Control popover placement using the data-bs-placement attribute with options like top, bottom, left, or right. Bootstrap automatically adjusts the position if there isn't enough screen space in the specified direction, ensuring optimal visibility and avoiding content cutoff. This responsive behavior improves usability across different devices and screen sizes, allowing developers to create consistent, accessible tooltips and popovers that adapt to various layout constraints seamlessly.
<!-- Top Popover -->
<button class="btn btn-primary" data-bs-toggle="popover"
data-bs-placement="top"
title="Top Popover"
data-bs-content="Content appears above">
Top
</button>
<!-- Right Popover -->
<button class="btn btn-success" data-bs-toggle="popover"
data-bs-placement="right"
title="Right Popover"
data-bs-content="Content appears on right">
Right
</button>
<!-- Bottom Popover -->
<button class="btn btn-warning" data-bs-toggle="popover"
data-bs-placement="bottom"
title="Bottom Popover"
data-bs-content="Content appears below">
Bottom
</button>
<!-- Left Popover -->
<button class="btn btn-info" data-bs-toggle="popover"
data-bs-placement="left"
title="Left Popover"
data-bs-content="Content appears on left">
Left
</button>Output:
🔹 Dismissible Popover
Click the button to open the popover, then click anywhere outside to dismiss it automatically. This example illustrates user-friendly dismissible behavior, which prevents accidental persistence of informational content. Such popovers are perfect for tutorials, inline validation messages, or transient notifications, improving overall interface cleanliness and reducing cognitive load by only showing information when actively needed.
<button type="button" class="btn btn-secondary"
data-bs-toggle="popover"
data-bs-trigger="focus"
title="Dismissible Popover"
data-bs-content="Click outside to close this popover">
Dismissible Popover
</button>Output:
Click the button, then click outside to dismiss
🔹 HTML Content in Popovers
Click to see a popover containing formatted HTML content like bold text, lists, and inline images. This demonstrates how popovers can serve as compact content containers, reducing page jumps and keeping users focused. By embedding structured HTML, you can present data-rich explanations, step-by-step instructions, or visually enhanced notifications without disrupting the overall page flow or design consistency.
<button type="button" class="btn btn-success"
data-bs-toggle="popover"
data-bs-html="true"
title="<strong>HTML Title</strong>"
data-bs-content="<ul><li>Item 1</li><li>Item 2</li></ul>">
HTML Popover
</button>Output:
Click to see formatted HTML content
🔹 Hover Trigger Popover
Hover over the element to see the popover appear automatically, providing instant contextual information. This hover-based interaction is perfect for interfaces where immediate feedback is valuable, such as data dashboards, icon explanations, or inline help systems. It reduces click fatigue and allows users to explore content dynamically, improving engagement and making the interface feel more responsive and intuitive.
<button type="button" class="btn btn-warning"
data-bs-toggle="popover"
data-bs-trigger="hover"
title="Hover Popover"
data-bs-content="This appears when you hover over the button">
Hover Over Me
</button>Output:
Hover to see the popover