Tooltips
A tooltip component for displaying additional information on hover or focus. Built on Radix UI primitives with customizable positioning and styling. Perfect for providing context and help text.
Installation
Import
Usage
Use Tooltip to provide additional context and help text. Keep tooltip content concise. Use appropriate positioning to avoid viewport overflow. Use asChild on TooltipTrigger to compose with other components. Use ComposedTooltip for simpler API when you don't need full control.
Design Guidelines
Maintain consistent tooltip styling throughout your application. Use appropriate positioning to avoid covering important content. Keep tooltip content concise and scannable. Use rich content sparingly. Position tooltips clearly relative to their triggers.
Basic Usage
Simple tooltip on hover
Positioning
Tooltips with different positions
With Icons
Tooltips on icon buttons
Rich Content
Tooltip with rich content
Composed Tooltip
Using ComposedTooltip for simpler API
Tooltip
Root tooltip component that manages tooltip state This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
defaultOpen | boolean | — | Uncontrolled default open state |
onOpenChange | (open: boolean) => void | — | Callback fired when open state changes |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
TooltipTrigger
Element that triggers the tooltip on hover or focus This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
TooltipContent
Content container for the tooltip This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "top" | Side of the trigger to display the tooltip |
align | "start" | "center" | "end" | "center" | Alignment of the tooltip relative to trigger |
sideOffset | number | 4 | Distance in pixels from the trigger |
children | React.ReactNode | — | Tooltip content |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
TooltipArrow
Optional arrow element pointing to trigger This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
ComposedTooltip
Composed tooltip with simplified API This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
Trigger | React.ComponentType | — | Component to use as trigger |
TriggerProps | object | — | Props to pass to the trigger component |
content | string | React.ReactNode | — | Tooltip content |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
Accessibility
Accessibility features and considerations
Tooltips are keyboard accessible and include proper ARIA attributes. They appear on focus for keyboard users. Screen readers announce tooltip content. Ensure tooltip content is descriptive and helpful. Don't rely solely on tooltips for critical information.