Get startedFoundationsComponentsTemplatesBlocksAIStories
Browse Components

Components

AccordionAlertBadgeBreadcrumbButtonCard groupCardIcon cardImage cardThumbnail cardCheckboxClose buttonCombo boxDatepickerDescription listDividerDrawerDropdownFile uploadFooterIcon buttonIcon listInputLinkMainnavMastheadModalOverflow menuPaginationProgress barQuantity toggleRadioSelectSidebarSidenavSkeletonSpinnerStepperSubnavSwitchSystem bannerTabTableTable of contentsTextareaToastTooltip

Tooltip

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

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Add brief help

Use tooltips for short hints, descriptions, or keyboard shortcuts.

Support visible labels

Tooltips add detail to a labelled control or icon, rather than replacing the label.

Open on user attention

Tooltips can appear on hover, focus, or click based on the trigger.

Anatomy

1

Label

2

Container

Configuration

Placement

Tooltips can be anchored to any side of their target. Choose the side with the most space and least overlap with surrounding content.

Hover me

Anchors above the target. This is the default placement.

Trigger

Tooltips can open on hover and focus, or only on a specific interaction. Use click to make the tooltip persistent on touch devices.

Hover or focus me

Default behaviour, open through mouse hover or keyboard focus.

Content length

Tooltip content should stay short enough to read quickly without covering important UI.

Hover me

Use short content for quick clarification of a control or icon.

Structure

Design tokens used

Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.

CategoryTokenValueWhere it's usedPaddingsgds-padding-sm12pxSpace between the left and right edges of the component and its contentsgds-padding-xs8pxSpace between the top and bottom edges of the component and its contentBordersgds-border-radius-md8pxCorner radius of the tooltipTypographysgds-font-size-1414pxFont size of the tooltipSizesgds-dimension-320320pxMaximum width of the tooltipLayersgds-z-index-overlay800Stacking layer of the tooltip

Usage

When to use

  • Use tooltip for short supplementary explanations on hover or focus.
  • Use it when the interface already works without the tooltip and the extra text simply adds context.

When not to use

  • Do not put essential instructions or long content inside a tooltip.
  • Do not rely on tooltip as the only way to explain a control.

Best practices

Use tooltips for short supplementary hints

Use tooltips for brief explanations or shortcut hints on elements that already have a visible affordance.

Do not put critical information in a tooltip

Information users need to complete a task should be visible without hovering. Use hint text or inline messages.

Keep tooltip text concise

Aim for a short phrase that fits on one or two lines. Long tooltips are often missed and hard to read.

Submit
Do not attach tooltips to elements that already have a visible label

Only use a tooltip when it explains something the label or icon does not already convey.

Choose a placement that does not cover key content

Anchor the tooltip on the side with the most space and least overlap so users can read it without losing context.

Do not rely on hover-only tooltips for keyboard or touch users

Hover-only triggers exclude keyboard and touch users. Use the default hover and focus trigger so tabbing also opens it.

Accessibility considerations

Built-in accessibility

  • Tooltips display supporting text on hover and keyboard focus by default.
  • The tooltip bubble uses role="tooltip".

Labels and content

  • Use tooltip content to clarify, not to hide essential instructions.
  • Keep tooltip text short.

Focus and interaction

  • The trigger must be focusable for keyboard users.
  • Add tabindex="0" to non-focusable HTML triggers when they need a tooltip.

Keyboard interaction

KeyInteractionTabMoves focus from the tooltip trigger to the next focusable element.Shift+TabMoves focus to the previous interactive element.

Updates

DateVersionDescription08 Jun 2026v3.21.0Oobee test passes in #686.

Roadmap

Planned itemStatusTargetFuture enhancements for tooltipPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #ask-sgds-v3

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/tooltip

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.

Past VersionsSGDS v1SGDS v2