Bootstrap

Bootstrap JS Popover

Bootstrap JS Popovers: Add Smart Tooltips That Pop

Need to show extra content on hover or click without cluttering your UI? Bootstrap Popovers are perfect for this. They’re like tooltips — but can include rich HTML, buttons, and more.

In this post, you’ll learn:

  • ✅ How to create and trigger popovers

  • ⚙️ Customize their content, placement, and behavior

  • Use the JavaScript API

  • Real-world examples like info buttons and inline help

Step 1: Include Bootstrap

Include Bootstrap’s CSS and JS (with Popper.js included):

html
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

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

Step 2: Basic Popover Markup

Unlike tooltips, popovers must be initialized with JavaScript.

Example:

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

JavaScript Initialization:

javascript
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
popoverTriggerList.forEach(triggerEl => {
new bootstrap.Popover(triggerEl);
});

⚙️ Placement Options

Set data-bs-placement to control where the popover appears:

html
<button class="btn btn-info" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right-side popover">
Right Popover
</button>

Available values: top, right, bottom, left, auto

Programmatic Popover (JavaScript API)

You can create and control popovers entirely with JS:

javascript
const myButton = document.getElementById('popoverBtn');
const popover = new bootstrap.Popover(myButton, {
title: 'Dynamic Title',
content: 'This popover was created with JavaScript.',
trigger: 'click'
});

popover.show(); // Show manually
popover.hide(); // Hide manually
popover.toggle(); // Toggle

Popover Triggers

Set how the popover is triggered:

Trigger Value Description
click (Default) On click
hover On mouse hover
focus On focus (e.g. form field)
manual Control via JS only

Example:

html
<button data-bs-toggle="popover" data-bs-trigger="hover focus" ...>Hover me</button>

Custom Popover with HTML

Enable HTML in the popover:

html
<button class="btn btn-warning" data-bs-toggle="popover" data-bs-html="true" title="Custom" data-bs-content="<strong>Bold</strong> text and <em>emphasis</em>.">
Rich HTML
</button>

Common Use Cases

  • ❓ Help icons or inline info

  • Document annotations

  • Settings explanations

  • Tooltips with more detail

Dismissing Popovers

You can close a popover when clicking elsewhere using the focus trigger or by using the hide method.

Or dismiss with a click inside the popover:

javascript
document.body.addEventListener('click', function (e) {
if (!e.target.closest('.popover') && !e.target.matches('[data-bs-toggle="popover"]')) {
bootstrap.Popover.getInstance(e.target)?.hide();
}
});

⚠️ Notes & Gotchas

  • Popovers must be initialized with JS — they won’t work without it.

  • They rely on Popper.js for positioning — included in the Bootstrap bundle.

  • They don’t work on disabled buttons unless wrapped with a <span> or container.

Final Thoughts

Bootstrap’s popovers are a fantastic way to show extra content without cluttering the page. With full JavaScript control and HTML support, they’re ideal for modern interfaces — just use them wisely to avoid overwhelming your users.

Useful Links

Related Posts

Leave a Reply

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