ThiloDesign System
DV

Tooltip

shadcn/ui
4 sub-components

Contextual label on hover. Use for icon-only buttons, truncated text, and keyboard shortcuts.

@/components/ui/tooltip

Basic usage

Positions

In-context — icon toolbar

Icon-only buttons always need a tooltip so users know what each action does.

Hover the toolbar buttons to see tooltips with keyboard shortcuts.

Sub-components

ComponentRole
TooltipProviderWrap at app root — sets delay and skip timings globally
TooltipRoot — manages open/closed state per tooltip
TooltipTriggerElement that triggers the tooltip on hover/focus
TooltipContentThe tooltip bubble — supports side, align, sideOffset

On this page