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

With Action Buttons

Tooltips showing keyboard shortcuts

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