A Popover in Bootstrap is a versatile, small overlay that appears when a user interacts with an element—such as clicking, hovering, or focusing on it. Popovers are highly customizable and can display contextual information, help tips, or additional details in a visually distinct box. Unlike tooltips, popovers support HTML content, allowing for images, titles, buttons, or other elements, and they stay visible until the user clicks outside the popover area.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Popover Examples</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<section>
<h4>Examples of Popovers</h4>
<p>Click the buttons below to see various popovers in action:</p>
<!-- Popover Trigger Buttons with Different Placements -->
<div class="d-flex flex-wrap gap-2 mb-3">
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Top Popover"
data-bs-content="This is a top-aligned popover." data-bs-placement="top">
Top Popover
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-title="Right Popover"
data-bs-content="This popover appears to the right of the button." data-bs-placement="right">
Right Popover
</button>
<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-title="Bottom Popover"
data-bs-content="Here’s a bottom-aligned popover." data-bs-placement="bottom">
Bottom Popover
</button>
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-title="Left Popover"
data-bs-content="This popover is aligned to the left." data-bs-placement="left">
Left Popover
</button>
<!-- HTML Content Popover -->
<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-title="HTML Content"
data-bs-html="true" data-bs-content="<b>Bold</b> and <i>italic</i> text with <u>HTML</u> support.">
HTML Content Popover
</button>
<!-- Popover with Image Content -->
<button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-title="Image Popover"
data-bs-html="true" data-bs-content="<img src='logo.png' alt='Sample Image'> Image inside popover.">
Image Popover
</button>
<button type="button" class="btn btn-dark" data-bs-toggle="popover" data-bs-title="Interactive Popover"
data-bs-html="true" data-bs-content="Sign up for updates: <input type='email' class='form-control mt-2' placeholder='Email'><br><a href='#' class='btn btn-sm btn-primary mt-2'>Submit</a>">
Interactive Popover
</button>
<!-- Timed Dismiss Popover -->
<button type="button" class="btn btn-success" id="timedPopover">
Timed Dismiss Popover
</button>
<!-- Popover with Tooltip Combination -->
<button type="button" class="btn btn-dark" data-bs-toggle="popover" data-bs-title="Tooltip Combo"
data-bs-content="Hover here to see both tooltip and popover!" data-bs-placement="top"
title="This is a tooltip!">
Tooltip & Popover
</button>
<!-- Hover-Triggered Popover -->
<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-title="Hover Popover"
data-bs-content="This popover appears on hover." data-bs-trigger="hover">
Hover Popover
</button>
<!-- Popover with Input Field and Button -->
<button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-title="Popover with Form"
data-bs-html="true" data-bs-content="Enter details: <input type='text' class='form-control mt-2' placeholder='Name'><button class='btn btn-sm btn-primary mt-2'>Submit</button>">
Form Popover
</button>
<!-- Persistent Popover with Manual Close -->
<button type="button" class="btn btn-success" id="persistentPopover">
Persistent Popover
</button>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Click the buttons below to see various popovers in action: