Prev Next

BS5 Popover

Bootstrap 5 Popovers are small overlay popups that display additional information or actions when an element is clicked or hovered.

Key Topics

Basic Popover

Enable popovers using the data-bs-toggle="popover" attribute and the title and data-bs-content attributes.

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

Explanation: The data-bs-toggle="popover" attribute enables the popover, while title and data-bs-content define its content.

Popover Placement

Set the popover's position using the data-bs-placement attribute with values like top, bottom, left, or right.

<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="top" title="Top Popover" data-bs-content="Popover on top.">
    Popover Top
</button>

Explanation: The data-bs-placement attribute specifies the direction of the popover.

Popover with HTML

Enable HTML content in popovers by setting the data-bs-html="true" attribute.

<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-html="true" title="HTML Popover" data-bs-content="<b>Bold Text</b> and <i>italic text</i>">
    HTML Popover
</button>

Explanation: The data-bs-html="true" attribute allows rendering of HTML inside the popover.

Complete Popover Example

Here is a complete example demonstrating popovers with different placements and content types.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Popover Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap Popover</h2>
        <button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Basic Popover" data-bs-content="This is a basic popover.">
            Basic Popover
        </button>
        <button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="top" title="Top Popover" data-bs-content="Popover on top.">
            Popover Top
        </button>
        <button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-html="true" title="HTML Popover" data-bs-content="<b>Bold Text</b> and <i>italic text</i>">
            HTML Popover
        </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
            return new bootstrap.Popover(popoverTriggerEl);
        });
    </script>
</body>
</html>

Explanation: This example combines default, positioned, and HTML popovers for a comprehensive demonstration.

Key Takeaways

  • Use data-bs-toggle="popover" to enable popovers.
  • Customize positions with data-bs-placement.
  • Enable HTML content with data-bs-html="true".
Prev Next