Bootstrap Tooltip
Tooltips show a small popup of text when a user hovers over or focuses on an element, useful for brief hints without cluttering the interface. Unlike other components, tooltips must be manually enabled with JavaScript.
Add data-bs-toggle="tooltip" and a title attribute containing the tooltip text to any element, then initialize tooltips in JavaScript for them to appear.
<button data-bs-toggle="tooltip" title="Tooltip text">Hover me</button>Enabling tooltips
Because tooltips are opt-in for performance reasons, you must select all tooltip-triggering elements and call new bootstrap.Tooltip(el) on each one to activate them.
Placement and content
Use data-bs-placement to control whether the tooltip appears on top, bottom, left, or right of the element. The title attribute holds the text shown inside the tooltip.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="This is a tooltip">
Hover over me
</button>
<script>
const triggers = document.querySelectorAll('[data-bs-toggle="tooltip"]');
triggers.forEach(el => new bootstrap.Tooltip(el));
</script>A gray button that shows a small popup reading 'This is a tooltip' above it on hoverThe JavaScript loop finds every tooltip-enabled element and activates Bootstrap's Tooltip plugin on it.
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="More info here">Info</a>A link that shows a tooltip to its right side when hovereddata-bs-placement="right" positions the tooltip to the right of the trigger element.
Key points
- Tooltips must be manually initialized with JavaScript.
- The title attribute holds the tooltip's text.
- data-bs-placement controls tooltip position (top, bottom, left, right).
- Tooltips are shown on hover or keyboard focus.