Bootstrap Popover

21 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Rich Popovers

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Popover classes to add interactive pop-up boxes with richer content than tooltips, perfect for detailed info or mini-menus. We’ll pair popovers with images for a vibrant look.

What You’ll Learn

Creating a basic popover
Positioning popovers
Using popovers with HTML content
Combining popovers with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Popovers

Bootstrap Popovers use the data-bs-toggle="popover" attribute with a title and data-bs-content to display pop-up boxes when users click an element. Unlike tooltips, popovers support richer content (e.g., HTML) and are triggered by clicks, ideal for buttons, links, or icons.

Assume Bootstrap CSS and JS are included in your project (we’ll skip the <link> and <script> tags as requested).

Step 2: Create a Basic Popover

Start with a simple popover on a button. Use this code:

<div class="container">
    <h3>Basic Popover</h3>
    <button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Title" data-bs-content="This is a simple popover message.">
        Click Me
    </button>
</div>

Explanation:

container: Centers and constrains content.
btn btn-primary: Blue button to trigger the popover.
data-bs-toggle="popover": Enables the popover.
title="Popover Title": Sets the popover’s header.
data-bs-content: Defines the popover’s body text.

Clicking the button shows the popover above by default.

Step 3: Position Popovers

Control popover placement (top, right, bottom, left). Try this:

<div class="container">
    <h3>Positioned Popovers</h3>
    <button type="button" class="btn btn-success me-2" data-bs-toggle="popover" data-bs-placement="top" title="Top Popover" data-bs-content="Appears above the button.">
        Top
    </button>
    <button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="right" title="Right Popover" data-bs-content="Appears to the right.">
        Right
    </button>
</div>

Explanation:

data-bs-placement="top", right: Sets popover position.
btn btn-success, btn-info: Green and cyan buttons for variety.
me-2: Adds margin-end for spacing between buttons.
Each button triggers a popover in a different direction.

This demonstrates flexible popover positioning.

Step 4: Use Popovers with HTML Content

Add HTML content to popovers for richer displays. Add this:

<div class="container">
    <h3>Popover with HTML</h3>
    <button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-html="true" title="User Info" data-bs-content="<b>Name:</b> John Doe<br><a href='#'>View Profile</a>">
        Show User Info
    </button>
</div>

Explanation:

btn btn-warning: Yellow button to trigger the popover.
data-bs-html="true": Allows HTML in the popover content.
data-bs-content: Includes bold text and a link.
title="User Info": Sets the popover header.

Clicking the button shows a popover with formatted HTML content.

Step 5: Combine with an Image

Pair a popover-enabled element with a dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Project Popover</h3>
            <p>Click for project details.</p>
            <a href="#" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right" title="Project Details" data-bs-content="Status: In Progress<br>Due: May 2025">
                View Project
            </a>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into popover trigger (8 units) and image (4 units).
a with btn btn-primary: Blue link styled as a button with a right-positioned popover.
data-bs-content: Includes multi-line project details.
Uses a 200×150 green image for vibrancy.
img-fluid rounded: Ensures the image is responsive with rounded corners.

The image suggests a project context.

Final Code

Here’s a combined example with varied popovers and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Popover</h3>
            <button type="button" class="btn btn-secondary" data-bs-toggle="popover" title="Simple Popover" data-bs-content="This is a basic popover.">
                Click Me
            </button>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>HTML Popover</h3>
            <button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-html="true" title="Profile" data-bs-content="<b>Email:</b> user@example.com<br><a href='#'>Contact</a>">
                Show Profile
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Task Popover</h3>
            <p>Click for task info.</p>
            <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right" title="Task Info" data-bs-content="Priority: High<br>Due: April 2025">
                View Task
            </button>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A simple popover on a gray button (default top position).
An HTML popover on a green button with formatted content.
A task popover on a blue button (right position) beside a red 250×150 image.
All popovers are responsive, appearing on click, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Popover Docs for more options.
Try data-bs-trigger="hover" to show popovers on hover.
Use data-bs-custom-class for custom popover styles.

Conclusion

You’ve mastered Bootstrap Popovers! With attributes like data-bs-toggle="popover", data-bs-placement, and data-bs-html, plus striking images, you’ve created rich, interactive pop-ups. Keep experimenting to enhance your webpages.