Skip to content
Try free

Tooltip

A short text description of a control, shown on focus and hover, hoverable, dismissed with Esc.

  • Free core, MIT
  • Version 2.0.0-rc.1
  • APG pattern: Tooltip

Examples

These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.

Default

Show the code

Default, code

<TooltipTrigger><Button variant="outline">Copy link</Button><Tooltip {...args} /></TooltipTrigger>

Open

Show the code

Open, code

<TooltipTrigger defaultOpen><Button variant="outline">Copy link</Button><Tooltip {...args} /></TooltipTrigger>

Placements

Show the code

Placements, code

<div className="flex flex-wrap gap-gap-lg py-12">
  {(['top', 'bottom', 'start', 'end'] as const).map((p) => <TooltipTrigger key={p} defaultOpen={p === 'bottom'}><Button variant="outline">{p}</Button><Tooltip placement={p}>Opens {p}</Tooltip></TooltipTrigger>)}
</div>

Tokens

The 5 design tokens Tooltip reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 5 tokens
Tokens Tooltip reads
TokenValue nowCSS variable
elevation.2…--sd-elevation-2
layer.tooltip…--sd-layer-tooltip
tooltip.bg…--sd-tooltip-bg
tooltip.fg…--sd-tooltip-fg
tooltip.radius…--sd-tooltip-radius

Install

The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).

Install

npm i @superduperui/react @superduperui/tokens

Import

import { Tooltip, TooltipTrigger } from "@superduperui/react"

Props

Tooltip also takes the props of the React Aria component it’s built on.

Tooltip props
PropTypeWhat it does
childrenrequiredReactNodeShort, plain text. Never the only place information lives, never interactive content.
placementunknownDefault 'top'
offsetunknownDefault 8

When to use it

Use it for

  • Naming or explaining an icon-only control (IconButton has one built in)
  • A keyboard shortcut hint

Use something else for

  • Essential information or anything interactive: use Popover or put it on the page
  • Disabled controls (they cannot take focus)

Accessibility

Screen readers announce "Copy link, button, Copies the link to your clipboard".

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.

Compact density meets AA (2.5.8, 24px targets), not AAA.

What your product still has to do

  • Keep tooltip text short; never the only copy of information

Shared patterns it ships with: 1.4.13 (hoverable, persistent, dismissable).

This release’s test results

Test results for Tooltip in this release
axe-core (WCAG A, AA, AAA and best practice)80 runs across every story, theme, density and width: 0 violations
Rendered text contrast95 text runs: 0 below 7:1, lowest 16.71:1
Target size12 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)18 focus stops in 3 browser engines: all pass
Keyboard scriptChromium 2 of 2, Firefox 2 of 2, WebKit 2 of 2

Manual passes with VoiceOver and NVDA haven’t been done yet.

Keyboard

Each step is scripted and run in Chromium, Firefox and WebKit.

Tooltip keyboard steps
KeyWhat happens
TabFocus opens the tooltip at once
EscapeEsc dismisses it without moving focus (1.4.13)

In Figma

The Figma component is Tooltip, with Placement (Top, Bottom, Start, End); Length (Short, Long). The Figma library isn’t published yet.

Figma to code: Placement → placement (Top = "top", Bottom = "bottom", Start = "start", End = "end"); Text → children; Length (Short, Long; preview only).