Bootstrap 5 Tooltip: Enable, Position and Style Tooltips

A Bootstrap tooltip is the small dark label that appears when you hover over or focus an element, such as an icon button that needs a name. Bootstrap 5 tooltips are built on the Popper positioning library, and unlike most Bootstrap components they are opt-in: they do nothing until you turn them on with one line of JavaScript. This guide shows the markup and that line, then covers placement, HTML content, tooltips on disabled buttons, styling, and why a tooltip doesn’t appear. Everything is for Bootstrap 5.3. For a bigger panel with a title that opens on click, see the Bootstrap popover guide.

A working tooltip

<button type="button" class="btn btn-secondary"
  data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">
  Copy
</button>

Then load Bootstrap’s JavaScript bundle, which includes Popper, and initialize every tooltip on the page:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.9/dist/js/bootstrap.bundle.min.js"></script>
<script>
  document.querySelectorAll('[data-bs-toggle="tooltip"]')
    .forEach(el => new bootstrap.Tooltip(el))
</script>

The initialization is the step most people miss. Bootstrap leaves tooltips off for performance, so without it, hovering does nothing.

Placement

Set where the tooltip appears with data-bs-placement: top (the default), right, bottom, or left.

<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Opens in a new tab">Docs</a>

If there isn’t room, Popper flips the tooltip to the opposite side automatically.

The title text

Use data-bs-title for the text. A plain title attribute also works, and Bootstrap moves it into the tooltip so the browser’s own tooltip doesn’t appear as well. data-bs-title is better because nothing appears before the JavaScript loads.

To change the text later, update the tooltip instance:

const button = document.querySelector('#copy-btn')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(button)
button.addEventListener('click', () => {
  tooltip.setContent({ '.tooltip-inner': 'Copied!' })
})

HTML inside a tooltip

Allow HTML with data-bs-html="true":

<button class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-html="true"
  data-bs-title="<strong>Shortcut:</strong> Ctrl + K">Search</button>

Bootstrap runs the HTML through its sanitizer, which strips scripts and tags it doesn’t allow. Never put text from users into an HTML tooltip without escaping it yourself.

Tooltips on icons and links

Tooltips suit controls that have no visible text, like an icon button. Give the button an aria-label too, so screen readers have a name for it even before the tooltip shows:

<button type="button" class="btn btn-light" aria-label="Delete"
  data-bs-toggle="tooltip" data-bs-title="Delete">
  <i class="bi bi-trash"></i>
</button>

The icon comes from Bootstrap Icons. Tooltips show on keyboard focus as well as hover, so only add them to elements users can reach with the Tab key: links, buttons, and form fields. On a plain <span>, add tabindex="0".

Tooltips on disabled buttons

A disabled button can’t be hovered or focused, so its tooltip never shows. Wrap it in an element that can be, and put the tooltip on the wrapper:

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip"
  data-bs-title="Save your changes first">
  <button class="btn btn-primary" type="button" disabled>Publish</button>
</span>

Options

Set options as data-bs-* attributes or in the constructor:

new bootstrap.Tooltip(el, {
  trigger: 'hover focus',   // or 'click', 'manual'
  delay: { show: 300, hide: 100 },
  container: 'body',
  customClass: 'tooltip-brand',
})

• trigger: what opens the tooltip. Use click for touch-first interfaces.
• delay: milliseconds before showing and hiding, so tooltips don’t flash as the mouse passes over.
• container: 'body': attaches the tooltip to the body. Use it when a tooltip inside a table, card, or input group is clipped or shifts the layout.
• customClass: adds a class to the tooltip, for styling one tooltip differently.

Call tooltip.show(), tooltip.hide(), tooltip.toggle(), tooltip.disable(), or tooltip.dispose() to control a tooltip from code.

Style tooltips

Tooltips use CSS variables. Change them for every tooltip:

.tooltip {
  --bs-tooltip-bg: #2f55ff;
  --bs-tooltip-color: #fff;
  --bs-tooltip-max-width: 260px;
  --bs-tooltip-opacity: 1;
}

Or only for tooltips with a custom class, set with customClass or data-bs-custom-class="tooltip-brand":

.tooltip-brand {
  --bs-tooltip-bg: var(--bs-primary);
}

The arrow takes the same background color automatically. In Sass, $tooltip-bg, $tooltip-color, $tooltip-max-width (200px by default), and $tooltip-opacity (0.9) set the defaults.

Why a tooltip doesn’t show

Nothing happens on hover. Tooltips aren’t initialized. Add the new bootstrap.Tooltip(el) loop after loading the JavaScript bundle.

An error says Popper is required. You loaded bootstrap.min.js, which doesn’t include Popper. Use bootstrap.bundle.min.js instead.

Tooltips on new content don’t work. The loop ran before that content existed. Initialize the new elements after you add them, or use a delegated selector: new bootstrap.Tooltip(document.body, { selector: '[data-bs-toggle="tooltip"]' }).

The markup uses Bootstrap 4 attributes. Bootstrap 5 needs data-bs-toggle and data-bs-placement, not data-toggle and data-placement, and doesn’t use jQuery’s $().tooltip().

The tooltip is cut off. A parent has overflow: hidden. Set container: 'body'.

FAQ

How do I enable tooltips in Bootstrap 5?

Add data-bs-toggle="tooltip" and data-bs-title="..." to the element, load bootstrap.bundle.min.js, then initialize them: document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el)). Tooltips are opt-in, so they don’t work without this step.

Why is my Bootstrap tooltip not working?

The most common reasons are that tooltips weren’t initialized with JavaScript, Bootstrap was loaded without Popper (use the bundle), or the markup uses Bootstrap 4’s data-toggle instead of data-bs-toggle. Tooltips on disabled buttons also never show unless you wrap the button.

How do I change the tooltip position in Bootstrap?

Add data-bs-placement with top, right, bottom, or left. The tooltip flips to the opposite side automatically when there isn’t enough room.

How do I change the color of a Bootstrap tooltip?

Set the --bs-tooltip-bg and --bs-tooltip-color CSS variables on .tooltip, or on a custom class applied with data-bs-custom-class. In Sass, change $tooltip-bg and $tooltip-color.

How do I show a tooltip on a disabled button?

Wrap the button in a <span class="d-inline-block" tabindex="0"> and put the tooltip attributes on the span. Disabled elements don’t receive hover or focus, so the tooltip has to live on the wrapper.