Tooltips

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

Tooltip

The Tooltip description from Figma goes here

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>

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
    Primary Buttonc-button c-button--primary
    Secondary Buttonc-button c-button--secondary
    Transparent Buttonc-button c-button--transparent