Skip to content

Tooltip

A short label shown on hover and keyboard focus. CSS only, no island.

OverlaysServer-rendered

Examples

Placements

Hover waits 450ms; keyboard focus shows at once. Flips at the viewport edge.

Example
<Tooltip content="Runs tools/list against the server">
  <Button variant="secondary" icon="plug-zap">Test connection</Button>
</Tooltip>
<Tooltip content="Below" placement="bottom">
  <Button variant="secondary">Bottom</Button>
</Tooltip>

Adding information

When the tooltip says something the trigger does not, give it an id and point aria-describedby at it. IconButton already wraps its label in a tooltip.

Expires in 2 days. Rotate it from Settings.
Example
<Tooltip id="tip-token" content="Expires in 2 days. Rotate it from Settings.">
  <Button variant="ghost" size="sm" icon="key" aria-describedby="tip-token">Token</Button>
</Tooltip>
<IconButton icon="refresh" label="Refresh tools" />

Usage

Usage
import { Tooltip } from '@switchboard/ui'

<Tooltip content="Last call 2 minutes ago">
  <Button variant="ghost" size="sm">Activity</Button>
</Tooltip>

Props

Every component also takes mix, for css() and mixins applied after its own style.

Tooltip

Tooltip props
PropTypeDefaultDescription
content*RemixNode–Short text. Never interactive.
children*RemixNode–The trigger; must be the first child and focusable.
placement'top' | 'bottom' | 'left' | 'right''top'Preferred side; flips when there is no room.
idstring–Set it and aria-describedby on the trigger when the tooltip adds information. Without it the tooltip is aria-hidden.

Also accepts every <span> attribute (on the wrapper).

Accessibility

  • Has role="tooltip". Without an id it is aria-hidden, a visual echo of the trigger's own name.
  • Shows on keyboard focus (:focus-visible), not only on hover; touch devices never show it.
  • Hidden while the trigger has aria-expanded="true", so it never covers an open menu.

Guidance

Do

  • Keep it to a few words.
  • Put information people need on the page, not only in a tooltip.

Don’t

  • Put links or buttons in a tooltip.
  • Wrap a non-focusable element; keyboard users will never see it.