Popover - Bootstrap 5

Bootstrap Popover is similar to tooltip, only the difference is that it open on clicking an item, also it is use for large text.

• You must include bootstrap.bundle.min.js which contains Popper.
• Popovers are opt-in for performance reasons, so you must initialize them yourself.
• Popovers with zero-length titles are never displayed.

Example 1: Bootstrap 5 Popover.

<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>

You can customize the appearance of Popovers using CSS variables data-bs-custom-class="custom-tooltip"

Example 2: Bootstrap Tooltip with custom class.

.custom-popover {
	--bs-popover-max-width: 200px;
	--bs-popover-border-color: var(--bs-primary);
	--bs-popover-header-bg: var(--bs-primary);
	--bs-popover-header-color: var(--bs-white);
	--bs-popover-body-padding-x: 1rem;
	--bs-popover-body-padding-y: .5rem;
}
		
<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
	Custom popover
</button>

Click the buttons below to see the four popover directions: top, right, bottom, and left.

Example 3: Bootstrap Popover with four directions

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

Use the focus trigger to dismiss popovers on the user's next click of a different element than the toggle element.

Example 4: Bootstrap Popover with dismiss on next click.

<a tabindex="0" class="btn btn-secondary" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
	
<script>
const popover = new bootstrap.Popover('.popover-dismiss', {
    trigger: 'focus'
})
</script>