Tooltip

Bootstrap's tooltip plugin allows you to add custom tooltips. Tooltips must be initialized via JavaScript and work on any element.

Basic Tooltips

							<!-- Initialization required -->
<script>
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
tooltips.forEach(el => new bootstrap.Tooltip(el));
</script>

<button data-bs-toggle="tooltip"
  data-bs-title="My tooltip">
  Hover me
</button>

Tooltip Placement

							<button data-bs-toggle="tooltip"
  data-bs-placement="top"
  data-bs-title="Tooltip on top">Top</button>

<button data-bs-toggle="tooltip"
  data-bs-placement="right"
  data-bs-title="Tooltip on right">Right</button>

<button data-bs-toggle="tooltip"
  data-bs-placement="bottom"
  data-bs-title="Bottom">Bottom</button>

<button data-bs-toggle="tooltip"
  data-bs-placement="left"
  data-bs-title="Tooltip on left">Left</button>

HTML Tooltip

							<button data-bs-toggle="tooltip"
  data-bs-html="true"
  data-bs-title="<em>Tooltip</em> with <u>HTML</u>">
  Hover me
</button>

Tooltip on Disabled Elements

							<span class="d-inline-block"
  data-bs-toggle="tooltip"
  data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" disabled
    style="pointer-events: none;">
    Disabled button
  </button>
</span>

Tooltip on Icons & Links

Hover this link info Badge avatar 
								<a href="#" data-bs-toggle="tooltip"
  data-bs-title="Link tooltip">
  Hover me
</a>

<span data-bs-toggle="tooltip"
  data-bs-title="Icon tooltip">
  <!-- icon -->
</span>