Tooltips

Basic Tooltips

Add data-bs-toggle="tooltip" and title attributes to any element. Tooltips require JavaScript initialization.

<!-- Tooltips require JavaScript initialization -->
<button type="button" class="btn btn-primary"
  data-bs-toggle="tooltip"
  title="This is a tooltip!">
  Hover me
</button>

<!-- Initialize all tooltips on the page -->
<script>
  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
  const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));
</script>

Placement

Use data-bs-placement to position tooltips on top, right, bottom, or left.

<button data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Top</button>
<button data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Right</button>
<button data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Bottom</button>
<button data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Left</button>

HTML Content

Add data-bs-html="true" to allow HTML inside tooltips.

<button type="button" class="btn btn-accent"
  data-bs-toggle="tooltip"
  data-bs-html="true"
  title="<strong>Bold text</strong> and <em>italic</em>">
  Tooltip with HTML
</button>

Disabled Elements

Disabled elements can't be hovered. Wrap them in a <span> to enable tooltips.

<!-- Wrap disabled elements in a span -->
<span data-bs-toggle="tooltip" title="Disabled button tooltip">
  <button class="btn btn-primary" disabled style="pointer-events: none;">
    Disabled Button
  </button>
</span>

Tooltip vs Popover

Know when to use each component.