Bootstrap Popover

Bootstrap Popover Plugin

The Popover Plugin

The Popover plugin is similar to tooltips but can contain much more content. It’s a pop-up box that appears when the user clicks or hovers over an element. Popovers rely on the Popper library for positioning, which is included in bootstrap.bundle.min.js.

Example of Popovers:

<button type="button" class="btn btn-lg btn-danger m-2" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button type="button" class="btn btn-secondary m-2" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover content">Popover on top</button>

To enable popovers, you must initialize them using JavaScript:

document.addEventListener(‘DOMContentLoaded’, function () { var popoverTriggerList = [].slice.call(document.querySelectorAll(‘[data-bs-toggle=“popover”]’)); var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl); }); });

Note: Popovers require Bootstrap’s JavaScript (bootstrap.bundle.min.js) and Popper. Ensure these are included in your project. If you’re including JavaScript files individually, make sure popover.js is included after tooltip.js (as Popover extends Tooltip) and that Popper is available.

How To Create a Popover

To create a popover, add the data-bs-toggle="popover" attribute to an element.

Use the title attribute (or data-bs-title) to specify the header text of the popover, and use the data-bs-content attribute to specify the text that should be displayed inside the popover’s body:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Popover Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
  <a href="#" role="button" class="btn btn-info"
     data-bs-toggle="popover"
     title="Popover Header"
     data-bs-content="Some content inside the popover body. This can be longer and include HTML if needed (ensure data-bs-html='true').">
    Toggle popover
  </a>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // Initialize all popovers on the page
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })
</script>

</body>
</html>

Important: Popovers must be initialized with JavaScript. The code above selects all elements with data-bs-toggle="popover" and initializes them.

If you want to include HTML in your popover content, you must set data-bs-html="true".

Positioning Popovers

By default, the popover will appear on the right side of the element.

Use the data-bs-placement attribute to set the position of the popover: top, bottom, left, or right.

<div class="container mt-3">
  <button type="button" class="btn btn-secondary m-1" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
    Popover on top
  </button>
  <button type="button" class="btn btn-secondary m-1" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
    Popover on right
  </button>
  <button type="button" class="btn btn-secondary m-1" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
    Popover on bottom
  </button>
  <button type="button" class="btn btn-secondary m-1" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
    Popover on left
  </button>
</div>
<!-- Remember to initialize popovers with JavaScript -->

Tip: You can also use data-bs-placement="auto", which will let Popper dynamically reorient the popover. For example, auto left will display the popover on the left when possible, otherwise on the right. The data-bs-container="body" attribute is often recommended to avoid rendering issues in more complex components.

Closing Popovers (Dismiss on next click)

By default (trigger: 'click'), the popover is toggled when you click on the trigger element again. To make the popover dismissible when the user clicks outside the popover (on the next click after toggling), you need to use the focus trigger. However, this requires the trigger element to be focusable (like a button or an anchor with tabindex).

A common way to achieve ‘dismiss on next click’ is by setting data-bs-trigger="focus". This will close the popover when the trigger element loses focus (e.g., clicking elsewhere).

<a tabindex="0" class="btn btn-lg btn-danger" role="button"
   data-bs-toggle="popover"
   data-bs-trigger="focus"
   title="Dismissible popover"
   data-bs-content="And here's some amazing content. It's very engaging. Right?">
  Dismissible popover (click away to dismiss)
</a>
<!-- Remember to initialize popovers with JavaScript -->

Trigger on Hover

If you want the popover to be displayed when you move the mouse pointer over the element and hidden when you move it away, use data-bs-trigger="hover" or data-bs-trigger="hover focus" for hover with keyboard accessibility.

<button type="button" class="btn btn-primary"
        data-bs-toggle="popover"
        data-bs-trigger="hover focus"
        title="Popover on Hover"
        data-bs-content="This popover appears on hover or focus.">
  Hover or Focus on me
</button>
<!-- Remember to initialize popovers with JavaScript -->

Complete Bootstrap Popover Reference

For a complete reference of all popover options, methods, and events, as well as advanced configurations (like using custom HTML templates or specific Popper configurations), please consult the official Bootstrap 5 Popover documentation.

Key options include animation, container, delay, html, placement, selector, template, title, content, trigger, and offset.