Tooltip

A tooltip is a short text label that appears when the user hovers over or focuses an element. It explains a control that isn't clear on its own.

Default markup

Add data-bs-toggle="tooltip" and a title to the element. data-bs-placement puts the tooltip at the top, bottom, left or right.

<div class="btn-list">
  <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
  <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</button>
  <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
  <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</button>
</div>

Tooltip with HTML

Set data-bs-html="true" to allow HTML in the title, for example to emphasize one word.

<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>

JavaScript

Tabler automatically initializes all elements with data-bs-toggle="tooltip" on page load. This is the code that runs:

const tooltipTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.map(function (tooltipTriggerEl: HTMLElement) {
  const options = {
    delay: { show: 50, hide: 50 },
    html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true',
    placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
  }
  return new Tooltip(tooltipTriggerEl, options)
})

Accessibility

• A tooltip only describes; it never replaces a name. The trigger still needs its own text or aria-label.
• The trigger must be focusable. Bootstrap shows the tooltip on focus as well as on hover, so a span or an a without href leaves keyboard users with nothing.
• Never put a link, a button or a form field inside a tooltip. It disappears on blur, so nothing in it can be reached. Use a popover for that.
• Tabler enables HTML in a tooltip only when you set data-bs-html="true". Leave it off for text that comes from users.
• Do not attach a tooltip to a disabled control - a disabled element fires no events. Wrap it in a focusable span instead.

SCSS variables

Use these SCSS variables to customize tooltips. The default values are:

$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: var(--text-inverted);
$tooltip-bg: var(--bg-surface-inverted);
$tooltip-border-radius: var(--border-radius);
$tooltip-opacity: 0.9;
$tooltip-padding-y: var(--spacer-1);
$tooltip-padding-x: var(--spacer-2);
$tooltip-margin: null; // TODO: remove this in v6

$tooltip-arrow-width: 0.8rem;
$tooltip-arrow-height: 0.4rem;

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

Related