Tooltips & Popovers

Tooltips and Popovers

Overlay components for extra context on hover or click

Tooltips and popovers are overlay components that display extra information on hover or click. They attach to trigger elements and support multiple placements.

Tooltips appear on hover and display short text. Set the placement with data-bs-placement and the content with data-bs-title.

<button data-bs-toggle="tooltip"
  data-bs-placement="top"
  data-bs-title="Tooltip text">
  Hover me
</button>

Hover each button to see tooltip placement

27 / 37