---
title: Tooltip
summary: 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.
description: Explain interface elements with tooltips shown on hover. Control placement, add HTML content, and customize how they appear.
related: [/ui/components/popover]
source: core/scss/bootstrap/_tooltip.scss
css-vars: tooltip
classnames:
  component:
    - class: tooltip
      desc: Container element, positioned by Bootstrap
  part:
    - class: tooltip-inner
      desc: The bubble holding the text
    - class: tooltip-arrow
      desc: Pointer towards the trigger, positioned by Bootstrap
---
import Example from '@components/Example.astro';
import CodeDocs from '@components/CodeDocs.astro';

## 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.

<Example>
<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>
</Example>

## Tooltip with HTML

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

<Example>
<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>
</Example>

## JavaScript

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

<CodeDocs name="tooltip-init" file="core/js/src/tooltip.ts" />

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

```js
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.