Tooltip

Ink on a 4px cap, 12px text, 300ms delay. For the name of an icon button or the reason a control is disabled. Never for content the user needs to act: nothing essential lives in a tooltip.

<Tooltip><TooltipTrigger asChild><Button size="icon" aria-label="Details"><Info /></Button></TooltipTrigger><TooltipContent>Label</TooltipContent></Tooltip>

Icon button

Why disabled

Pointer-only: a disabled button cannot take focus, so the reason also sits beside it in visible copy.

Waiting for the agent to finish the draft.

Sides