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.

Playground

Props in the URL.

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

Loading playground.

States

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

Default

Forced-open hint tooltip.

Rich

Tooltip with title and shortcut.

Props

Name	Type	Default	Description
`content`	`ReactNode`	-	Tooltip body rendered in the floating surface.
`placement`	`'top' \| 'right' \| 'bottom' \| 'left'`	`top`	Floating surface placement.
`forceOpen`	`boolean`	`false`	Keeps the tooltip visible for documentation and screenshots.
`shortcut`	`readonly string[]`	-	Optional keycaps inside the tooltip.
`children`	`ReactNode`	-	Tooltip anchor.