Bootstrap Popover
Popovers are similar to tooltips but can show more content, including a title and a longer body of text, appearing in a small box when the user clicks or hovers over an element.
Like tooltips, popovers must be enabled manually with JavaScript. Use data-bs-toggle="popover", a title attribute for the heading, and data-bs-content for the body text.
<button data-bs-toggle="popover" title="Title" data-bs-content="Body text">Click me</button>Enabling popovers
Select all popover-triggering elements and call new bootstrap.Popover(el) on each one, similar to how tooltips are activated.
Popover content and dismissal
The title attribute sets the popover's heading and data-bs-content sets its body text. Add data-bs-trigger="focus" to dismiss the popover when the user clicks elsewhere.
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Title" data-bs-content="Here is some more detailed popover content.">
Click for info
</button>
<script>
const pops = document.querySelectorAll('[data-bs-toggle="popover"]');
pops.forEach(el => new bootstrap.Popover(el));
</script>Clicking the button shows a small box with a bold title and extra descriptive textThe Popover plugin reads the title and data-bs-content attributes to build the popup content.
<a href="#" data-bs-toggle="popover" data-bs-trigger="focus" title="Info" data-bs-content="Click elsewhere to close this.">Focus me</a>A link that shows a popover on focus/click, and closes when the user clicks awaydata-bs-trigger="focus" makes the popover dismiss automatically when focus leaves the element.
Key points
- Popovers show a title and longer body content, unlike simple tooltips.
- Popovers must be initialized with JavaScript, like tooltips.
- data-bs-content sets the popover's body text.
- data-bs-trigger="focus" allows dismissing the popover by clicking elsewhere.