What is the recommended way to use Bootstrap 5 tooltips and popovers?
Asked on Jun 01, 2025
1 Answer
Bootstrap 5 provides a straightforward way to implement tooltips and popovers using data attributes and JavaScript initialization. Here's a basic example of how to set them up.
<!-- BEGIN COPY / PASTE -->
<!-- Tooltip Example -->
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip text">
Hover for tooltip
</button>
<!-- Popover Example -->
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content">
Click for popover
</button>
<script>
// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// Initialize popovers
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
</script>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- Ensure you include Bootstrap's CSS and JS files in your project for tooltips and popovers to function.
- Tooltips are activated by hovering over the element, while popovers require a click.
- Use `data-bs-toggle` attribute to specify the type (tooltip or popover) and additional attributes for customization.
- JavaScript initialization is required to activate these components, as shown in the script section.