Tooltip

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

Example

Top

HTML React Web Component
<button type="button" class="sgds btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
View on React storybook View on Web component storybook

Bottom

HTML React Web Component
<button type="button" class="sgds btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
View on React storybook View on Web component storybook

Right

HTML React Web Component
<button type="button" class="sgds btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
View on React storybook View on Web component storybook

Left

HTML React Web Component
<button type="button" class="sgds btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>
View on React storybook View on Web component storybook

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;

Last updated 22 November 2023
Home


Latest version 2.2.0