A NSW Government website
NSW Government
NSW Design System v3.28.1

Tooltip

A tooltip is a short descriptive message that appears when a user hovers or focuses on an element.

View variants & code

He was drifting on the open sea when the marlin tugged fiercely at the line. In that moment, Santiago felt both endurance and reverence as the line cut deep into his hands.

Through his solitary struggle, Santiago comes to understand that:

  • Victory can come with deep sacrifice
  • The ocean is not only his livelihood but a mirror of his soul
  • Pride can be both noble and punishing

These realisations rose slowly from the long struggle — like the swell of the sea beneath Santiago's skiff, hard-won and without fanfare. Walk further into the current.

Show code Hide code

Toggletip

In the quiet desperation of the third day, Santiago battles the marlin, tied to his skiff and spirit. As exhaustion deepens, the struggle becomes not just physical, but spiritual — a reflection on pride, endurance, and the quiet dignity of effort. Some stories hold truths not in their facts, but in their silences — in what remains unspoken between man, sea, and sky.

The marlin embodies Santiago's greatest struggle, blending themes of isolation, respect, and the dignity of effort.

Silences hold truths not in their facts, but in what remains unspoken between man, sea, and sky.

Show code Hide code

Usage

Tooltips should only provide concise additional information for inline text elements.

Guidance

Do
  • use tooltips on inline text elements that appear in the main content of the page to provide more context or brief explanations for technical or industry-specific terms
  • use tooltips on inline text elements to describe acronyms or abbreviations.
Don't
  • use tooltips for displaying vital information
  • use tooltips for non-text elements such as icons, images, buttons or form fields.

Types of tooltips

There are two types of tooltips based on their purpose.

Default:

  • displayed when the trigger element is hovered by the mouse or when it receives keyboard focus.
  • focus remains on the trigger element while the tooltip is displayed.
  • dismissed by navigating outside.
  • positioning adjusts itself dynamically based on collisions and available space.
  • should be used for text only content.
  • to enhance user experience and prevent unintended activations, a brief delay (~400ms) is implemented prior to showing the tooltip.

Toggletip:

  • opens via keyboard or when the trigger element is clicked by the mouse.
  • dismissed with the Escape key, the close button or by navigating outside.
  • traps focus inside the toggletip, and restores it when dismissed.
  • positioning adjusts itself dynamically based on collisions and available space.
  • use Toggletips for interactive content like links, since they stay visible after user interaction. For plain text without interaction, go for Tooltips instead.

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

Tooltip keyboard interaction and focus

  • Focus stays on the triggering element while the Tooltip is displayed.
  • The Tooltip is invoked when the trigger element receives focus, then it is dismissed when it no longer has focus (onBlur). If the Tooltip is invoked with mouseIn, then it is dismissed with on mouseOut.
  • The element that serves as the Tooltip container has role tooltip.
  • The element that triggers the tooltip references the tooltip element with aria-describedby.

Toggletip keyboard interaction and focus

  • Opens via the Enter or Space keys, or by clicking the trigger element.
  • On open, focus moves into the Toggletip container to navigate elements inside with the Tab key.
  • Dismissed by tabbing out of the Toggletip, pressing the Escape key, or clicking outside.
  • When dismissed, focus returns to the trigger element.

ARIA attributes