Tooltip

Example

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

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

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

<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

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

Best practices:

1. Avoid long delays for tooltips to appear or disappear. They should be responsive enough to be useful without being annoying.
2. Do not overuse tooltips. Too many tooltips can clutter the interface and overwhelm the user.

Tooltip should be used when:

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

Tooltip should not be used when:

1. 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.

Behaviour
Tooltips should dynamically adjust their position to ensure they remain within the viewport and are fully visible, even if the triggering element is near the edge of the screen. Tooltips should also disappear when the user moves the mouse away from the element.

Accessibility guidelines

Aria attributes

1. The element that serves as the tooltip container has role="tooltip".
2. The element that triggers the tooltip references the tooltip element with aria-describedby.

Keyboard accessibility

1. Tab will open the tooltip when focusing on the tooltip's target element. Shifting focus away from tooltip's target element dismisses the tooltip.

1. Enter opens the tooltip when tooltip's target element is focused. The focus remains on the target element.

Focus indicator

1. Focus indicator should be clearly visible when a header is focused.
2. Move focus to the accordion content when it is expanded, if necessary.
3. Ensure that focusable elements within the accordion panel can be navigated using the keyboard.

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;