Tooltip

DESIGN RATIONALE

A lightweight tooltip that appears on hover with a 150ms delay to prevent accidental triggers. Uses a dark surface at 90% opacity with a 4px blur. The arrow is a CSS triangle positioned based on the tooltip's placement (top, bottom, left, right). Text is limited to 80 characters.

USAGE GUIDELINES

Use to clarify icon buttons, explain form fields, or provide abbreviated data context. Never use for content that requires reading time; use a popover instead.