Get startedFoundationsComponentsPatternsGuidelinesResourcesAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Tooltip

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

GitHubGitHub logocomponents/tooltip
StorybookStorybook logocomponents/tooltip
DesignUsageAccessibilityUpdates

Purpose

Surface context without cluttering the UI

Tooltips reveal supporting information — descriptions, keyboard shortcuts, clarifications — on demand, keeping the interface clean until users ask for more.

Supplement, not replace, labels

Tooltips are supplementary — they add detail to elements that already have a visible label or icon, not a substitute for accessible labelling.

Triggered by attention, not action

Because tooltips appear on hover or focus rather than a click, they feel ambient — users encounter them naturally as they explore the interface.

Anatomy

Hover to view
1

Target element

2

Tooltip bubble

3

Supporting text

Configuration

Hover and focus

Tooltips appear on hover or keyboard focus to provide short supplementary context for interface elements.

Hover to view

Renders a tooltip that appears on hover or keyboard focus. Use to provide short supplementary explanations for elements that already have a visible label or icon.

Playground

BETA
Hover to view

Structure

Hover to view

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: padding-sm under sgds/btn means sgds/btn/padding-sm.

sgds/tooltip
CategoryComponent tokenSemantic tokenValuePaddingpadding-smsgds/padding/sm—padding-xssgds/padding/xs4pxBorderborder-radius-mdsgds/border-radius/md8pxTypographyfont-size-14sgds/font-size/14—Colourcolor-fixed-lightsgds/color-fixed-light#F3F3F3surface-fixed-darksgds/surface-fixed-dark—Sizedimension-320sgds/dimension/320—Z Index Overlayz-index-overlaysgds/z-index-overlay—

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

Hover to view
Keep the tooltip brief

Short supporting text works best because users should be able to read it at a glance.

Hover to view Hover to view
Do not hide essential guidance

Important instructions should stay visible in the interface, not appear only on hover or focus.

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

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for tooltipPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

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.