Tooltips

Overview #

A few important things to know when using the tooltip plugin:

• Tooltips rely on the third party library Popper (opens in new tab) for positioning. You must include popper.js before bootstrap.js, or use one bootstrap.bundle.js which contains Popper.
• Tooltips are opt-in for performance reasons, so you must initialize them yourself.

You can create tooltips using the data-bs-toggle="tooltip" attribute along with a data-bs-title. Hover over the following buttons and link (or focus) to a see a tooltip pop up.

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="Collaborate with your team">Share</button>
<a href="..." target="_blank" rel="noreferrer" data-bs-toggle="tooltip" data-bs-title="Open in a new tab">View</a>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="Next item" aria-label="Next item"><i class="fa-light fa-angle-right"></i></button>

Please note, the icon being used is taken from the Font Awesome icon library (opens in new tab).

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)
);

A few more things worth noting about tooltips:

• 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 or disabled 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> elements 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.
• You can use title instead of data-bs-title. When title is used, Popper will replace it automatically with data-bs-title when the element is rendered.

Directions #

Set the direction of the tooltip using data-bs-placement="{direction}", where {direction} can be top, right, bottom, or left. Directions are mirrored when using Halfmoon in RTL.

<!-- Tooltip on top -->
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Top">Top</button>

<!-- Tooltip on right -->
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Right">Right</button>

<!-- Tooltip on bottom -->
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Bottom">Bottom</button>

<!-- Tooltip on left -->
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Left">Left</button>

Custom HTML and styling #

Use custom HTML inside the tooltip by adding the data-bs-html="true" attribute and placing your markup inside the data-bs-title. Moreover, you can also 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 the local CSS variables.

<button 
  type="button" 
  class="btn btn-primary" 
  data-bs-toggle="tooltip" 
  data-bs-custom-class="custom-tooltip" 
  data-bs-html="true" 
  data-bs-title="This <strong>tooltip</strong> has been themed and customized."
>
  Custom tooltip
</button>

.custom-tooltip {
  --bs-tooltip-color: var(--bs-primary-foreground);
  --bs-tooltip-bg: var(--bs-primary);
}

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>

JavaScript usage #

The examples on this page use data-bs-* attributes for functionality, which is usually enough to cover a majority of use-cases. You can read about options, methods, events, and more in the official Bootstrap documentation.

Tooltips - Bootstrap
Continue reading on the offical documentation website