Tooltip

• Layer: Component
• Base: @ark-ui/solid Tooltip

Flat surface, no glow. Uses --font-mono for system-register text.

Placements

Hover each button to see placement

Top

Bottom

Left

Right

With Action Buttons

Tooltips showing keyboard shortcuts

Capture

Search

Props

Prop	Type	Default	Description
content	string	required	Tooltip text
placement	'top' | 'bottom' | 'left' | 'right'	'top'	Position relative to trigger
openDelay	number	400	Delay before showing (ms)
closeDelay	number	0	Delay before hiding (ms)
children	JSX.Element	required	Trigger element

Animation

• Enter: fade-in + zoom-in-95 with placement-aware slide
• Exit: fade-out + zoom-out-95
• Respects prefers-reduced-motion

Plane 1 Constraints

• No glow on tooltip
• No gradients
• Flat --surface2 background with --border

Accessibility

• Triggered on both hover and keyboard focus
• Content announced to screen readers via ARIA
• Arrow points to trigger element
• Ark UI handles focus management and escape-to-close

Token Dependencies

Token	Source
--tooltip-bg	--color-background-surface-alt
--tooltip-border	--color-border-default
--tooltip-text	--color-text-secondary
--tooltip-radius	--radius-sm
--tooltip-font-size	--font-size-xs
--tooltip-max-width	240px