← Back to all components

Tooltip

Informational popup on hover with four position options.

Tooltip on topTooltip on bottomTooltip on leftTooltip on right
<span class="tooltip">
  <button class="btn btn-secondary btn-sm">Hover me</button>
  <span class="tooltip-content top">Tooltip text</span>
</span>

<!-- Positions: top, bottom, left, right -->
<span class="tooltip">
  <button>...</button>
  <span class="tooltip-content bottom">Bottom tooltip</span>
</span>