Tooltip
Radix UI tooltip primitive for contextual helper text, with Figma-aligned primary surface styling, visible arrow, side placement, and optional keyboard shortcut content.
Import
Live Demo
Anchored helper text with side placement, arrow, and keyboard shortcut content.
Side variants
Figma node 122:13
Figma node 17103:810
Figma node 17103:817
Figma node 17103:820
With keyboard shortcut
Disabled trigger wrapper
Props
| Name | Type | Default | Description |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "top" | Preferred side of the trigger where tooltip content appears |
| sideOffset | number | 0 | Distance in pixels between the trigger and tooltip content |
| showArrow | boolean | true | Whether TooltipContent renders the Figma-aligned arrow |
| delayDuration | number | 0 | Delay in milliseconds before opening TooltipProvider content |
Examples
Basic Tooltip
Side Placement
Tooltips can be placed on any side of the trigger.
With Keyboard Shortcut
Disabled Trigger
Wrap disabled controls so the wrapper can receive hover and focus events.