Loading navigation…
User
API and Development
Tooltip displays brief, contextual information when users hover over or focus on an element, providing helpful hints without cluttering the interface. It provides a simple, accessible way to display supplementary information that appears on hover or focus. Built on Radix UI's Tooltip component, it ensures consistent tooltip behavior across the interface with automatic positioning, keyboard accessibility, and screen reader support.
Name | Type | Default | Description |
|---|---|---|---|
|
| — | — |
|
|
| — |
|
| — | Corner radius treatment for the tooltip surface; defaults from brand package when omitted. |
|
|
| Delay in milliseconds before the tooltip appears |
|
| — | — |
|
| — | — |
|
| — | — |
|
| — | The selector of the element to render the portal for the tooltip. If not provided, the tooltip will render in the default location (body). Use this to render the tooltip inside a specific container (e.g., ".radix-themes" for theme inheritance). |
|
|
| Prevents the tooltip from closing when the trigger is clicked. Useful for read-only elements where clicking should have no effect. |
|
|
| — |
|
|
| Wraps children in a span to reliably capture mouse enter/leave events.
Primarily needed with |
Interactive examples and edge cases for this component are in Storybook.
Use for simple text hints that appear on hover.
Control where the tooltip appears relative to its trigger element.
Display the tooltip above the trigger element (default).
Display the tooltip to the right of the trigger element.
Display the tooltip below the trigger element.
Display the tooltip to the left of the trigger element.
Control how the tooltip aligns with its trigger element.
Align the tooltip to the start of the trigger element.
Align the tooltip to the center of the trigger element (default).
Align the tooltip to the end of the trigger element.
Use React nodes for tooltips with formatted content.
Add tooltips to icon buttons for clarity.
Provide additional context for text elements.
Show full text in a tooltip when display text is truncated.
Conditionally disable tooltips based on application state.
When disabled, the tooltip doesn't appear and only the children are rendered.
Control tooltip visibility programmatically.
Wrap elements that don't support event handlers.
The tooltip automatically handles event delegation for wrapped elements.
Wrap disabled elements to show tooltips explaining why they're disabled.
Disabled elements don't emit pointer events, so wrapping them in a span enables tooltip functionality.
Use multiple tooltips in close proximity.
Handle longer tooltip content appropriately.
Tooltips automatically wrap long content, but keep tooltip text concise for better user experience.
Add tooltips to table cells for additional context.
Combine tooltips with icons for informative UI elements.
--z-index-tooltip and --z-index-popover share the same token value. .pr-tooltip therefore uses calc(var(--z-index-tooltip) + 100) so a tooltip on a control inside a popover always paints above the popover surface. Do not raise the --z-index-tooltip token itself for this — the .pr-z-index-tooltip utility is reused by snackbars and other chrome that must stay in the shared band.
Tooltips automatically adjust position when there's insufficient space.
Radix UI automatically flips the tooltip to the opposite side if there isn't enough space in the specified direction.
On this page