Bootstrap

Bootstrap Popover

✅ Basic Bootstrap 5 Popover Example

Here’s a working example using Bootstrap 5:

Step 1: Include Bootstrap CSS & JS

html
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Bundle JS (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

⚙️ Step 2: Add HTML with Popover Attributes

html
<button type="button"
class="btn btn-primary"
data-bs-toggle="popover"
title="Popover Title"
data-bs-content="This is the content of the popover.">
Click me
</button>

Step 3: Initialize with JavaScript

html
<script>
// Initialize all popovers on the page
document.addEventListener('DOMContentLoaded', function () {
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(el => new bootstrap.Popover(el));
});
</script>

Customization Options

Attribute Description
data-bs-content Content inside the popover
title Popover title
data-bs-placement top, bottom, left, right, auto
data-bs-trigger hover, focus, click, manual
data-bs-html="true" Enables rendering HTML in the content

Example with HTML Content and Placement

html
<button type="button"
class="btn btn-secondary"
data-bs-toggle="popover"
title="HTML Popover"
data-bs-html="true"
data-bs-placement="right"
data-bs-content="<b>This</b> is <i>rich</i> HTML content.">
Hover me
</button>

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *