Tooltip

Bootstrap

Bootstrap tooltip via data-bs-toggle="tooltip" and data-bs-title. Examples below; usage → Rules.

Docs init tooltips in bootstrap-overlays.js after navigation.

<button
  type="button"
  class="btn btn-primary btn-sm"
  data-bs-toggle="tooltip"
  data-bs-title="More information"
>
  Hover me
</button>
<button
  type="button"
  class="btn btn-ghost btn-sm"
  aria-label="More actions"
  data-bs-toggle="tooltip"
  data-bs-title="More actions"
>
  <i class="bi bi-three-dots"></i>
</button>

Rules

When to use

• Short label for icon-only controls ( aria-label on the control + matching tooltip is fine) — Iconography.
• Do not hide essential copy in a tooltip.

Content

A few words only. Longer than one line → Popover.