Sure! Here’s a concise guide to Bootstrap 5 Popover — a small overlay of content that appears on hover or click.

? Bootstrap 5 Popover

Popovers are like tooltips but can contain more content like titles and HTML.

1. Basic Popover

<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-content="This is the popover content!" title="Popover Title">  Click me</button>

• data-bs-toggle="popover" enables the popover on this element.

• data-bs-content="..." sets the content inside the popover.

• title="..." adds an optional title.

2. Required JavaScript Initialization

Popovers require JavaScript initialization. Use this script to enable 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)})

Or initialize individually:

var popover = new bootstrap.Popover(document.querySelector('#myPopover'))

3. Popover Placement Options

Control where the popover appears using data-bs-placement:

• top (default)

• bottom

• left

• right

Example:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover!">  Right Popover</button>

4. HTML Content in Popover

Allow HTML inside the popover content:

<button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-html="true" data-bs-content="<strong>Bold text</strong> and <em>italic text</em>">  HTML Popover</button>

5. Manual Control (Show/Hide)

You can programmatically control popovers:

var popoverTrigger = document.getElementById('myPopover')var popover = new bootstrap.Popover(popoverTrigger)// Show popoverpopover.show()// Hide popoverpopover.hide()// Toggle popoverpopover.toggle()

6. Dismiss on Focus Out

Make popover dismiss when clicking outside by setting trigger:

<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Dismisses on blur!">  Focus Dismiss Popover</button>

Complete Example

<button id="myPopover" type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-content="Hello, I'm a popover!" data-bs-placement="bottom">  Hover or Click me</button><script>  var popoverTrigger = document.getElementById('myPopover')  var popover = new bootstrap.Popover(popoverTrigger)</script>

If you want, I can help you build custom popovers with images, buttons, or anything else! Just ask.