Bootstrap 5 Popover Maker

Create and customize Bootstrap 5 popovers with ease!

Settings

Preview

Generated Code

Click settings to generate code...

Required JS

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

                    

FAQs

The direction setting allows you to choose the position of the popover relative to the trigger element (top, right, bottom, left).

This option ensures the popover is dismissed when you click anywhere outside of the popover.