Bootstrap 5 tooltips show small informational popups on hover. This page covers 4 tooltip patterns — basic, all positions, HTML content and custom styled — each with working copy-paste code.
Quick Setup
Tooltips require Bootstrap 5 JS and manual initialization:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
Key Classes Reference
| Attribute | What It Does |
|---|---|
data-bs-toggle="tooltip" | Marks element as a tooltip trigger |
data-bs-title="text" | Sets the tooltip content |
data-bs-placement="top" | Position: top, bottom, left, right |
data-bs-html="true" | Enables HTML content in tooltip |
data-bs-custom-class | Adds custom CSS class to tooltip |
data-bs-trigger | Sets trigger: hover, focus, click, manual |
data-bs-delay | Show/hide delay in milliseconds |
1. Basic Bootstrap 5 Tooltips
Basic tooltips on buttons and links. Tooltips require initialization via JavaScript.
2. Bootstrap 5 Tooltips on All Sides
Tooltips positioned on top, bottom, left and right using data-bs-placement.
3. Bootstrap 5 HTML Tooltips
Tooltips with HTML content — bold text, icons and formatted messages.
4. Bootstrap 5 Custom Styled Tooltips
Override default tooltip styles with custom CSS. Change background color, text color and arrow.
Frequently Asked Questions
Bootstrap 5 tooltips require JavaScript initialization. Add this after your Bootstrap JS: document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el)). Without this, tooltips won't appear even with the correct HTML attributes.
Get or create a Tooltip instance then call show: const tooltip = bootstrap.Tooltip.getOrCreateInstance(element); tooltip.show(). To hide: tooltip.hide(). To toggle: tooltip.toggle(). To destroy: tooltip.dispose().
Pass delay options when initializing: new bootstrap.Tooltip(el, { delay: { show: 500, hide: 100 } }). Or use the data attribute: data-bs-delay='{"show":500,"hide":100}'. The delay is in milliseconds.
Add data-bs-html='true' to the element and put HTML in data-bs-title: data-bs-html='true' data-bs-title='<strong>Bold</strong> text'. Be careful with user-generated content as this can introduce XSS vulnerabilities.
The most common reason is missing JavaScript initialization. Make sure you call new bootstrap.Tooltip(el) for each tooltip element after Bootstrap JS loads. Also check that bootstrap.bundle.min.js (not just bootstrap.min.js) is loaded as tooltips require Popper.js.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.