A NSW Government website
NSW Government
Design System v3.16.0

Tooltip

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

Usage

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.
  • describe acronyms or abbreviations.

When to avoid

Tooltips should only provide concise additional information for inline text elements. Do not use tooltips for:

  • displaying vital information.
  • 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 meet WCAG 2.1 AA accessibility guidelines.

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

  • The trigger element has aria-expanded set to true or false based on the open state.
  • The trigger element has aria-controls set to the id of the Toggletip element.
  • The trigger element has aria-haspopup set to the suitable role attribute of the Toggletip, depending on the type of content.
View in new windowView theming example

Tooltip

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

By reducing how severe the illness is, you are less likely to:

  • go to hospital
  • develop breathing difficulties
  • need assistance with oxygen or intensive care treatment, or
  • die from COVID-19.

Toggletip

How do antivirals for COVID-19 work?

Antiviral medicines target the virus (SARS-CoV-2) that causes COVID-19 to prevent it infecting healthy cells in your body and multiplying. This helps stop the spread of the virus inside your body and helps your immune system to fight off the infection.

SARS-CoV-2 is a single-stranded RNA betacoronavirus in the same subgenus as the severe acute respiratory syndrome (SARS) virus. Learn more

Tooltip

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

By reducing how severe the illness is, you are less likely to:

  • go to hospital
  • develop breathing difficulties
  • need assistance with oxygen or intensive care treatment, or
  • die from COVID-19.

Toggletip

How do antivirals for COVID-19 work?

Antiviral medicines target the virus (SARS-CoV-2) that causes COVID-19 to prevent it infecting healthy cells in your body and multiplying. This helps stop the spread of the virus inside your body and helps your immune system to fight off the infection.

SARS-CoV-2 is a single-stranded RNA betacoronavirus in the same subgenus as the severe acute respiratory syndrome (SARS) virus. Learn more