Tooltips

Informative message that appears when a user interacts with an element.

Icon for component-tooltip

Tooltip

1<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top"> 2 Tooltip on top 3</button> 4<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right"> 5 Tooltip on right 6</button> 7<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom"> 8 Tooltip on bottom 9</button> 10<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left"> 11 Tooltip on left 12</button>
Icon for copy

Accessibility

Make it clear what this tooltip widget does for the user.

DO

  • What to do with tooltips

DON'T

  • What not to do with tooltips

Classes

Complete list of all CSS classes for the component.

NameClass
Tooltiptooltip tooltip-