Tooltips

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

Tooltip

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
	Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
	Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
	Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
	Tooltip on left
</button>

Accessibility

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

What to do with tooltips

DON'T

What not to do with tooltips

Classes

Complete list of all CSS classes for the component.

Name	Class
Primary Button	`c-button c-button--primary`
Secondary Button	`c-button c-button--secondary`
Transparent Button	`c-button c-button--transparent`