Bootstrap 5 Tooltips component
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.
Tooltip example
<button type="button" class="btn btn-primary"
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-title="Hello World">
Hover Over Me
</button>
Tooltips are opt-in for performance reasons, you must initialize tooltips yourself via js new bootstrap.Tooltip()
.
JS
const element = document.querySelector('#target');
const tooltip = new bootstrap.Tooltip(element);
When activated, Tooltips display a text label identifying an element, such as a description of its function.
Overview
Things to know when using the tooltip plugin:
- Tooltips rely on the third party library Popper for positioning. You must include
popper.min.js
beforebootstrap.js
, or use onebootstrap.bundle.min.js
which contains Popper. - Tooltips are opt-in for performance reasons, so you must initialize them yourself.
- Tooltips with zero-length titles are never displayed.
- Specify
container: 'body'
to avoid rendering problems in more complex components (like our input groups, button groups, etc). - Triggering tooltips on hidden elements will not work.
- Tooltips for
.disabled
ordisabled
elements must be triggered on a wrapper element. - When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use
white-space: nowrap;
on your<a>
s to avoid this behavior. - Tooltips must be hidden before their corresponding elements have been removed from the DOM.
- Tooltips can be triggered thanks to an element inside a shadow DOM.
Enable tooltips
As mentioned above, you must initialize tooltips before they can be used. One way to initialize all tooltips on a page would be to select them by their data-bs-toggle
attribute, like so:
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
Positioning
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
Tooltip on left
</button>
Html tooltip
Add a custom HTML to tooltip.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true"
data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Arrow tooltips
The tooltip arrow is hidding in default. Add a .tooltip-arrow-auto
class to the data-bs-custom-class
attribute that give your tooltip an arrow indicating which element it refers to.
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-arrow-auto" data-bs-title="Hello World">Hover Over Me</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="tooltip-arrow-auto" data-bs-title="Hello World">Hover Over Me</button>
Tooltips on links
Hover over the links below to see tooltips:
Hover the link to see the tooltip
<p>
Hover the link to see the
<a href="#" data-bs-toggle="tooltip" title="I'm title" data-bs-title="Hi! I'm tooltip">tooltip</a>
</p>
title
or data-bs-title
in your HTML. When title
is used, Popper will replace it automatically with data-bs-title
when the element is rendered.Disabled elements
Elements with the disabled
attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <div>
or <span>
, ideally made keyboard-focusable using tabindex="0"
.
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
Custom tooltips
You can customize the appearance of tooltips using CSS variables. We set a custom class with data-bs-custom-class="custom-tooltip"
to scope our custom appearance and use it to override a local CSS variable.
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">Custom tooltip</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip-secondary" data-bs-title="This top tooltip is themed via CSS variables.">
Custom tooltip
</button>
CSS
.custom-tooltip {
--bs-tooltip-bg: var(--bs-primary);
}