Primitive

Tooltip

Dark inverse hint surface for focused labels.

Tooltips name unfamiliar controls or add short context. Do not put workflow instructions or long content in them.
feedback
DOM renderImage render
TooltipDefault
Use one short sentence.

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Forced-open hint tooltip.
Use one short sentence.
Render state

Rich

Tooltip with title and shortcut.
Command searchSearch across docs and examples.⌘k
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
contentReactNode-Tooltip body rendered in the floating surface.
placement'top' | 'right' | 'bottom' | 'left'topFloating surface placement.
forceOpenbooleanfalseKeeps the tooltip visible for documentation and screenshots.
shortcutreadonly string[]-Optional keycaps inside the tooltip.
childrenReactNode-Tooltip anchor.