Tooltip

Tooltip is a compound component for lightweight floating descriptions attached to a trigger.

Overview

Tooltip styling is driven by floating-surface semantics plus a small arrow visual. The component should stay visually lighter than Popover and significantly lighter than modal overlays.

Public CSS Variables

Variable	Value	Affects
Tooltip surface.`TooltipContent`, `TooltipArrow`		No visible change in this state
Floating elevation.`TooltipContent`		No visible change in this state
Readable tooltip text.`TooltipContent`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

TooltipContent uses floating surface semantics.
TooltipArrow uses the same surface color as the content.

State And Variant Interaction

Most variation comes from placement and content length, not a large variable API.
Styling should keep the tooltip distinct from action-heavy popovers.

Examples

.brand-theme {
  --surface-secondary: oklch(24% 0.005 285);
  --text-color: oklch(100% 0 0);
}

Do Not Override

Do not turn tooltip styling into a pseudo-popover with task-heavy content.
Do not flatten color and shadow until the tooltip loses its floating hint-like character.