Tooltip

Tooltips display more information when users hover over, focus on, or interact with an element.

Example

Top

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

                

Bottom

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

                

Right

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

                

Left

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

                

Anatomy

Tooltip 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

Tooltip 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;
Home


Previous version 2.0.0