Tooltips
Tooltips are tiny labels that appear on hover or focus. They name icon buttons, explain terms and show full text that was cut off. Below you will find placements, triggers, disabled wrappers, custom colours and many real spots such as toolbars, avatar stacks, tables and sidebars.
1Basic tooltip
Hover or focus the button to see its tooltip.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="Saves a copy to your account">Hover me</button>2Four directions
<code>data-bs-placement</code> sets the side.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-title="Tooltip on top" data-bs-placement="top">Tooltip on top</button>
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-title="Tooltip on right" data-bs-placement="right">Tooltip on right</button>
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-title="Tooltip on bottom" data-bs-placement="bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-title="Tooltip on left" data-bs-placement="left">Tooltip on left</button>
</div>3Links in text
Tooltips on inline links give extra context without clutter.
Brand name 17 works with gift wrapping and secure payments, so this powerful workflow shows data easy to understand without the usual hassle.
<p class="mb-0">Brand name 17 works with <a href="#" class="" data-bs-toggle="tooltip" data-bs-title="Connect in two clicks">gift wrapping</a> and <a href="#" class="" data-bs-toggle="tooltip" data-bs-title="Included in the Pro plan">secure payments</a>, so this powerful workflow shows data easy to understand without the usual hassle.</p>4Icon toolbar
Icon-only buttons need a tooltip and an <code>aria-label</code> to explain them.
<div class="btn-toolbar gap-1" role="toolbar" aria-label="Item actions">
<button type="button" class="btn btn-light border" data-bs-toggle="tooltip" data-bs-title="Edit" aria-label="Edit"><i class="bi bi-pencil-fill" aria-hidden="true"></i></button>
<button type="button" class="btn btn-light border" data-bs-toggle="tooltip" data-bs-title="Duplicate" aria-label="Duplicate"><i class="bi bi-files" aria-hidden="true"></i></button>
<button type="button" class="btn btn-light border" data-bs-toggle="tooltip" data-bs-title="Share" aria-label="Share"><i class="bi bi-share-fill" aria-hidden="true"></i></button>
<button type="button" class="btn btn-light border" data-bs-toggle="tooltip" data-bs-title="Download" aria-label="Download"><i class="bi bi-download" aria-hidden="true"></i></button>
<button type="button" class="btn btn-light border" data-bs-toggle="tooltip" data-bs-title="Delete" aria-label="Delete"><i class="bi bi-trash-fill" aria-hidden="true"></i></button>
</div>5Disabled wrapper
Wrap a disabled button in a focusable span so the tooltip still shows.
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Add a payment method first">
<button class="btn btn-primary" type="button" disabled>Upgrade</button>
</span>6Custom colors
<code>data-bs-custom-class</code> plus a few CSS variables give the tooltip your brand colour.
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="Styled with the theme primary colour" data-bs-custom-class="cb-tooltip">Custom tooltip</button>7Click trigger
<code>data-bs-trigger="click"</code> shows the tooltip only on click - useful on touch screens.
<button type="button" class="btn btn-outline-info" data-bs-toggle="tooltip" data-bs-title="You clicked me" data-bs-trigger="click"><i class="bi bi-hand-index-fill" aria-hidden="true"></i> Click me</button>8Avatar stack
Overlapping avatars show each member's name on hover.
<div class="d-flex">
<a href="#" class="d-inline-block" style="margin-left:0" data-bs-toggle="tooltip" data-bs-title="Mia Nguyen"><img src="../assets/img/avatar-9.svg" class="rounded-circle border border-2 border-white" width="40" height="40" alt="Mia Nguyen"></a><a href="#" class="d-inline-block" style="margin-left:-.6rem" data-bs-toggle="tooltip" data-bs-title="Liam Carter"><img src="../assets/img/avatar-1.svg" class="rounded-circle border border-2 border-white" width="40" height="40" alt="Liam Carter"></a><a href="#" class="d-inline-block" style="margin-left:-.6rem" data-bs-toggle="tooltip" data-bs-title="Liam Okafor"><img src="../assets/img/avatar-3.svg" class="rounded-circle border border-2 border-white" width="40" height="40" alt="Liam Okafor"></a><a href="#" class="d-inline-block" style="margin-left:-.6rem" data-bs-toggle="tooltip" data-bs-title="Tariq Rossi"><img src="../assets/img/avatar-8.svg" class="rounded-circle border border-2 border-white" width="40" height="40" alt="Tariq Rossi"></a><a href="#" class="d-inline-block" style="margin-left:-.6rem" data-bs-toggle="tooltip" data-bs-title="Amara Ortega"><img src="../assets/img/avatar-9.svg" class="rounded-circle border border-2 border-white" width="40" height="40" alt="Amara Ortega"></a>
</div>9Terms and abbreviations
Dotted underlined terms with a focusable span explain jargon.
Shipping is DDP and orders leave within one business day.
<p class="mb-0">Shipping is <span class="text-decoration-underline" style="text-decoration-style:dotted!important;cursor:help" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Delivered Duty Paid - all import costs included">DDP</span> and orders leave within one <span class="text-decoration-underline" style="text-decoration-style:dotted!important;cursor:help" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Monday to Friday, not counting holidays">business day</span>.</p>10Field help icon
A help icon after an input label.
app/
<div style="max-width:360px">
<label for="tip-field-1230" class="form-label">Workspace URL <span class="text-body-secondary" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Letters, numbers and dashes only"><i class="bi bi-question-circle-fill" aria-hidden="true"></i></span></label>
<div class="input-group">
<span class="input-group-text">app/</span><input type="text" class="form-control" id="tip-field-1230" value="brand-name-17">
</div>
</div>11Status dots
Coloured dots carry their details in a tooltip.
- Live order tracking Online
- Live order tracking Degraded
- Secure checkout Offline
<ul class="list-unstyled mb-0">
<li class="d-flex align-items-center gap-2 mb-1"><span class="d-inline-block rounded-circle bg-success" style="width:.7rem;height:.7rem" tabindex="0" data-bs-toggle="tooltip" data-bs-title="All systems running" aria-label="Online"></span>Live order tracking <small class="text-body-secondary">Online</small></li>
<li class="d-flex align-items-center gap-2 mb-1"><span class="d-inline-block rounded-circle bg-warning" style="width:.7rem;height:.7rem" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Slower than usual" aria-label="Degraded"></span>Live order tracking <small class="text-body-secondary">Degraded</small></li>
<li class="d-flex align-items-center gap-2 mb-1"><span class="d-inline-block rounded-circle bg-danger" style="width:.7rem;height:.7rem" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Down since 20:30" aria-label="Offline"></span>Secure checkout <small class="text-body-secondary">Offline</small></li>
</ul>12Contact icons
Large icon links with descriptive tooltips.
<div class="d-flex gap-3 fs-4">
<a href="#" class="link-body-emphasis" data-bs-toggle="tooltip" data-bs-title="Email us" aria-label="Email us"><i class="bi bi-envelope-fill" aria-hidden="true"></i></a><a href="#" class="link-body-emphasis" data-bs-toggle="tooltip" data-bs-title="Live chat" aria-label="Live chat"><i class="bi bi-chat-dots-fill" aria-hidden="true"></i></a><a href="#" class="link-body-emphasis" data-bs-toggle="tooltip" data-bs-title="Call +1 (555) 343-9682" aria-label="Call +1 (555) 343-9682"><i class="bi bi-telephone-fill" aria-hidden="true"></i></a><a href="#" class="link-body-emphasis" data-bs-toggle="tooltip" data-bs-title="Visit us in Lisbon" aria-label="Visit us in Lisbon"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i></a>
</div>13Table actions
Row action icons with tooltips naming the target.
| Member | Actions |
|---|---|
| Diego Kowalski | |
| Chloe Silva | |
| Hana Nguyen |
<div class="table-responsive">
<table class="table align-middle mb-0">
<thead>
<tr>
<th scope="col">Member</th>
<th scope="col" class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Diego Kowalski</td>
<td class="text-end text-nowrap"><button type="button" class="btn btn-sm btn-link link-secondary" data-bs-toggle="tooltip" data-bs-title="View Diego" aria-label="View"><i class="bi bi-eye" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-link link-secondary" data-bs-toggle="tooltip" data-bs-title="Edit Diego" aria-label="Edit"><i class="bi bi-pencil-fill" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-link link-danger" data-bs-toggle="tooltip" data-bs-title="Remove Diego" aria-label="Remove"><i class="bi bi-trash-fill" aria-hidden="true"></i></button></td>
</tr>
<tr>
<td>Chloe Silva</td>
<td class="text-end text-nowrap"><button type="button" class="btn btn-sm btn-link link-secondary" data-bs-toggle="tooltip" data-bs-title="View Chloe" aria-label="View"><i class="bi bi-eye" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-link link-secondary" data-bs-toggle="tooltip" data-bs-title="Edit Chloe" aria-label="Edit"><i class="bi bi-pencil-fill" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-link link-danger" data-bs-toggle="tooltip" data-bs-title="Remove Chloe" aria-label="Remove"><i class="bi bi-trash-fill" aria-hidden="true"></i></button></td>
</tr>
<tr>
<td>Hana Nguyen</td>
<td class="text-end text-nowrap"><button type="button" class="btn btn-sm btn-link link-secondary" data-bs-toggle="tooltip" data-bs-title="View Hana" aria-label="View"><i class="bi bi-eye" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-link link-secondary" data-bs-toggle="tooltip" data-bs-title="Edit Hana" aria-label="Edit"><i class="bi bi-pencil-fill" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-link link-danger" data-bs-toggle="tooltip" data-bs-title="Remove Hana" aria-label="Remove"><i class="bi bi-trash-fill" aria-hidden="true"></i></button></td>
</tr>
</tbody>
</table>
</div>14Truncated text
When <code>.text-truncate</code> cuts a title, the tooltip shows the whole text.
Our free shipping guides every detail in view at a fair price.
<div class="text-truncate border rounded p-2" style="max-width:220px" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Our free shipping guides every detail in view at a fair price.">
Our free shipping guides every detail in view at a fair price.
</div>15Rating stars
Each star names its rating on hover.
<div class="d-flex gap-1 fs-4 text-warning">
<a href="#" class="link-warning" data-bs-toggle="tooltip" data-bs-title="Poor" aria-label="1 stars - Poor"><i class="bi bi-star-fill" aria-hidden="true"></i></a><a href="#" class="link-warning" data-bs-toggle="tooltip" data-bs-title="Fair" aria-label="2 stars - Fair"><i class="bi bi-star-fill" aria-hidden="true"></i></a><a href="#" class="link-warning" data-bs-toggle="tooltip" data-bs-title="Good" aria-label="3 stars - Good"><i class="bi bi-star-fill" aria-hidden="true"></i></a><a href="#" class="link-warning" data-bs-toggle="tooltip" data-bs-title="Very good" aria-label="4 stars - Very good"><i class="bi bi-star-fill" aria-hidden="true"></i></a><a href="#" class="link-warning" data-bs-toggle="tooltip" data-bs-title="Excellent" aria-label="5 stars - Excellent"><i class="bi bi-star-fill" aria-hidden="true"></i></a>
</div>16Comparison table
Check marks and add-on icons in a pricing comparison explain themselves.
| Feature | Pro | Basic |
|---|---|---|
| Carbon-neutral delivery | ||
| Hand-checked quality | ||
| Member prices |
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">Feature</th>
<th scope="col" class="text-center">Pro</th>
<th scope="col" class="text-center">Basic</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="fw-normal">Carbon-neutral delivery</th>
<td class="text-center"><span class="text-success" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Included"><i class="bi bi-check-lg" aria-hidden="true"></i></span></td>
<td class="text-center"><span class="text-body-secondary" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Available as an add-on"><i class="bi bi-plus-circle-fill" aria-hidden="true"></i></span></td>
</tr>
<tr>
<th scope="row" class="fw-normal">Hand-checked quality</th>
<td class="text-center"><span class="text-success" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Included"><i class="bi bi-check-lg" aria-hidden="true"></i></span></td>
<td class="text-center"><span class="text-body-secondary" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Available as an add-on"><i class="bi bi-plus-circle-fill" aria-hidden="true"></i></span></td>
</tr>
<tr>
<th scope="row" class="fw-normal">Member prices</th>
<td class="text-center"><span class="text-success" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Included"><i class="bi bi-check-lg" aria-hidden="true"></i></span></td>
<td class="text-center"><span class="text-body-secondary" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Available as an add-on"><i class="bi bi-plus-circle-fill" aria-hidden="true"></i></span></td>
</tr>
</tbody>
</table>
</div>17Icon sidebar
A slim icon-only sidebar where tooltips on the right name each page.
<ul class="nav nav-pills flex-column text-center bg-body-tertiary rounded p-2" style="width:4rem">
<li class="nav-item"><a href="#" class="nav-link py-2 active" aria-current="page" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Home" aria-label="Home"><i class="bi bi-house-door-fill" aria-hidden="true"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link py-2" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Dashboard" aria-label="Dashboard"><i class="bi bi-speedometer2" aria-hidden="true"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link py-2" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Orders" aria-label="Orders"><i class="bi bi-table" aria-hidden="true"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link py-2" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Customers" aria-label="Customers"><i class="bi bi-people-fill" aria-hidden="true"></i></a></li>
</ul>18Copy button
A copy button with a tooltip next to a command; <code>data-demo-copy</code> puts the text on the clipboard.
$
<div class="input-group" style="max-width:420px">
<span class="input-group-text font-monospace small">$</span><input type="text" class="form-control font-monospace" value="npm install brand-name-17" readonly aria-label="Install command">
<button class="btn btn-outline-secondary" type="button" data-demo-copy="npm install brand-name-17" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" aria-label="Copy"><i class="bi bi-clipboard-fill" aria-hidden="true"></i></button>
</div>19Offset and no animation
<code>data-bs-offset</code> moves the tooltip away; <code>data-bs-animation="false"</code> shows it instantly.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-outline-dark" data-bs-toggle="tooltip" data-bs-title="Twenty pixels away" data-bs-offset="0,20">With offset</button>
<button type="button" class="btn btn-outline-dark" data-bs-toggle="tooltip" data-bs-title="No fade animation" data-bs-animation="false">Instant tooltip</button>
</div>20Keyboard shortcuts
Tooltips that reveal the keyboard shortcut for each command.
Tip: press Ctrl + K anywhere to search.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-light border" data-bs-toggle="tooltip" data-bs-title="Search (CTRL + K)" data-bs-placement="bottom"><i class="bi bi-search" aria-hidden="true"></i> Search</button>
<button type="button" class="btn btn-light border" data-bs-toggle="tooltip" data-bs-title="Save (CTRL + S)" data-bs-placement="bottom"><i class="bi bi-floppy-fill" aria-hidden="true"></i> Save</button>
<button type="button" class="btn btn-light border" data-bs-toggle="tooltip" data-bs-title="Undo (CTRL + Z)" data-bs-placement="bottom"><i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i> Undo</button>
</div>
<p class="small text-body-secondary mt-2 mb-0">Tip: press <kbd>Ctrl</kbd> + <kbd>K</kbd> anywhere to search.</p>