Introduction to Bootstrap 5 Popovers

• data-bs-toggle=”popover” → Enables the popover functionality
• title=”Popover Title” → Sets the popover heading
• data-bs-content=”Popover text” → Defines the popover content
• data-bs-placement=”top|right|bottom|left” → Specifies popover position

Example: Basic Popover

JavaScript Code:

To Enable Popover Functionality in Bootstrap we need to add below JavaScript Code with each Bootstrap Popover Classes:

<!-- Enable Bootstrap 5 Popovers -->
<script>
  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);
    });
  });
</script>

Bootstrap Code:

<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>

Output:

Explanation:

• The JavaScript snippet initializes all popovers on the page.
• title sets the popover header.
• data-bs-content contains the popover message.
• data-bs-toggle=”popover” enables Bootstrap popover functionality.