Tooltip

Short, non-essential hint on hover and focus. Dark or Light tone.

Preview

React · live from the Storybook

HTML and CSS

The same component as plain HTML with pixels-ui.css, no framework needed.

HTML

<div class="row" style="padding:56px 0 8px">
  <span class="px-tooltip-wrap"><button type="button" class="px-btn px-btn--secondary-gray" aria-describedby="tt-1">Hover me</button><span class="px-tooltip" role="tooltip" id="tt-1">This is a tooltip</span></span>
  <span class="px-tooltip-wrap"><button type="button" class="px-btn px-btn--secondary-gray px-btn--icon" aria-label="Help" aria-describedby="tt-2"><svg class="px-icon" aria-hidden="true">…</svg></button><span class="px-tooltip px-tooltip--light" role="tooltip" id="tt-2">Shortcuts<span class="px-tooltip__body">Press ⌘K to open the command palette.</span></span></span>
</div>

Usage

Never hide essential information in a tooltip.
Shows after ~200ms.

Installation

Included in the core files. No extra install.

HTML

<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>

Examples

Placements (static)

Top (default), Bottom and End.

HTML

<div class="row" style="align-items:flex-start"><span class="px-tooltip px-tooltip--static">Top</span><span class="px-tooltip px-tooltip--static px-tooltip--bottom">Bottom</span><span class="px-tooltip px-tooltip--static px-tooltip--light">Light<span class="px-tooltip__body">With supporting text.</span></span></div>

API reference

Class / attribute	Type	Description
`px-tooltip-wrap`	class	Wraps trigger + tooltip.
`px-tooltip · --light · --bottom · --end`	class	Tone and placement.
`px-tooltip__body`	class	Supporting text.

Figma properties

Tooltip10 variants · page “Tooltip”Open

Short, non-essential hint on hover/focus. Placement is logical: Start/End flip in RTL. Show after ~300ms, never hide essential info here, and connect with aria-describedby. Use Supporting text for a 1…

Property	Type	Values
Title	Text	“This is a tooltip”
Supporting text	Boolean	—
Supporting	Text	“Tooltips explain an element in a sentence or two. Keep them short.”
Placement	Variant	Top Bottom Start End None
Tone	Variant	Dark Light

Design tokens

Component tokens from the Figma Component collection. Override them to restyle just this component.

Token	Alias	Light value
`--px-tooltip-radius`	radius-md	8px
`--px-tooltip-padding-x`	spacing-md	12px
`--px-tooltip-padding-y`	spacing-sm	8px

Accessibility

Connect with aria-describedby.
Opens on focus as well as hover.