Tooltip

Example

 
<button type="button" class="cgds btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

        

 
<button type="button" class="cgds btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>

        

 
<button type="button" class="cgds btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>

        

 
<button type="button" class="cgds btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

        

Anatomy

1. Container: Serves to house information and depending on situation where you want the tooltip to appear.
2. Text: Serves to tell users what the tooltip is about.

Spacing

Within the tooltip
Ensure that there is a min of 16px spacing within the tooltip.

Usage guidelines

Tooltip should be used:

1. When you want to provide additional explanation for a form field that may be unfamiliar.

Tooltip should not be used:

1. When information is vital to task completion.

Usability guidelines

Position tooltips so they don’t block content
When choosing the place to display the tooltip, make sure you don’t cover important content.

Tooltips should be consistent in style and design
This is so that it is more intuitive to users.

Provide sufficient contrasts
A moderate contrast is important to ensure the tooltips are more visible to users.

Tooltip design tokens

$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: $white !default;
$tooltip-bg: $gray-600 !default;
$tooltip-border-radius: $border-radius !default;
$tooltip-opacity: 1 !default;
$tooltip-padding-y: $spacer * .5 !default;
$tooltip-padding-x: $spacer !default;
$tooltip-margin: 0 !default;
$tooltip-arrow-width: .8rem !default;
$tooltip-arrow-height: .4rem !default;
$tooltip-arrow-color: $tooltip-bg !default;