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:

// One element with a broken config must not stop the rest of the bundle, so
// every instance is created on its own. `data-bs-delay` on the element wins
// over the shorter default delay.
onDOMContentLoaded(() => {
  for (const tooltipTriggerEl of document.querySelectorAll<HTMLElement>('[data-bs-toggle="tooltip"], [data-tblr-toggle="tooltip"]')) {
    try {
      const options = {
        delay: Manipulator.getDataAttribute(tooltipTriggerEl, 'delay') ?? { show: 50, hide: 50 },
        placement: Manipulator.getDataAttribute(tooltipTriggerEl, 'placement') ?? 'auto',
      }
      Tooltip.getOrCreateInstance(tooltipTriggerEl, options)
    } catch (error) {
      console.error(error)
    }
  }
})

To use your own options, create the instance yourself. It replaces the one Tabler created, so only your options apply:

const el = document.getElementById('my-tooltip');
new tabler.Tooltip(el, { customClass: 'tooltip-wide', delay: 300 });

To read or control the existing instance without changing its options, use tabler.Tooltip.getInstance(el) or tabler.Tooltip.getOrCreateInstance(el).

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.

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.

CSS

Variables

The component uses local CSS variables on .tooltip for real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. Source: core/scss/bootstrap/_tooltip.scss.

--tooltip-zindex: #{$zindex-tooltip};
--tooltip-max-width: #{$tooltip-max-width};
--tooltip-padding-x: #{$tooltip-padding-x};
--tooltip-padding-y: #{$tooltip-padding-y};
--tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --tooltip-font-size);
--tooltip-color: #{$tooltip-color};
--tooltip-bg: #{$tooltip-bg};
--tooltip-border-radius: #{$tooltip-border-radius};
--tooltip-opacity: #{$tooltip-opacity};
--tooltip-arrow-width: #{$tooltip-arrow-width};
--tooltip-arrow-height: #{$tooltip-arrow-height};

Sass variables

Override these variables before importing Tabler to change the defaults. Source: core/scss/_variables.scss.

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

Related