Popover

A popover is a small overlay with an optional header, anchored to its trigger and positioned by Popper 32,753 . Unlike a tooltip, it opens on click by default and can hold a longer message. Popovers are opt-in for performance: nothing happens until you create instances, usually with a loop over every [data-bs-toggle="popover"].

Initializing popovers, one shown on the rightHTMLLive

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel=stylesheet>
<div class="p-4 pt-5">
  <a tabindex="0" class="btn btn-outline-secondary me-3" role="button" data-bs-toggle="popover"
    data-bs-trigger="focus" data-bs-content="Closes on next click">Help</a>
  <button type="button" class="btn btn-danger" id="pop" data-bs-toggle="popover"
    data-bs-title="Delete file?" data-bs-content="This cannot be undone.">Delete</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
<script>
  document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el));
  bootstrap.Popover.getInstance('#pop').show();
</script>

Browser output of 29

Options, set as data-bs-* or in the constructor, include placement (default 'right', flipped when there is no room), trigger ('click', 'hover', 'focus' or 'manual') and html (default false). Methods include show(), hide(), toggle() and setContent().

MENU