BBS5 Popover

BS5 Popover

The Popover component is similar to tooltips; it is a pop-up box that appears when the user clicks on an element.

Initialization

Popovers must also be initialized with JavaScript.

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))

var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl) })

Closing Popovers

By default, the popover is closed when you click on the element again. Use the data-bs-trigger="focus" attribute to dismiss the popover when clicking anywhere else.

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Header" data-bs-content="Some content inside the popover">
  Toggle popover
</button>

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