Tooltip
A short label for an icon or a truncated value, never for essential content.
@luc/uiExamples
Default
Opens on hover and on focus, and closes on Escape — a tooltip is never pointer-only.
<TooltipProvider>
<Tooltip content="Run the backtest" hint="⌘↵">
<Button variant="secondary">Run</Button>
</Tooltip>
</TooltipProvider>Usage
import { Tooltip } from "@luc/ui";<Tooltip content="Copy to clipboard" side="top">
<IconButton label="Copy" icon={<RiFileCopyLine />} />
</Tooltip>Package setup — peer requirements, the stylesheet and the provider — is on installation.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
Tooltip | 13 documented props | ({ content, children, arrow, side, align, sideOffset, className, hint, ...props }: TooltipProps) => import("@types/react").JSX.Element |
TooltipProvider | 4 documented props | import("@types/react").FC<RadixTooltip.TooltipProviderProps> |
Tooltip props
Type: TooltipProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
align? | "center" | "start" | "end" | undefined | — | |
arrow? | boolean | undefined | — | Render a small pointer arrow. Default `true`. |
children | ReactNode | — | |
className? | string | undefined | — | |
content | ReactNode | — | |
defaultOpen?inherited | boolean | undefined | — | |
delayDuration?inherited | number | undefined | — | The duration from when the pointer enters the trigger until the tooltip gets opened. This will override the prop with the same name passed to Provider. |
disableHoverableContent?inherited | boolean | undefined | — | When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger. |
hint? | ReactNode | — | Extra content under the label, e.g. a keyboard hint. |
onOpenChange?inherited | ((open: boolean) => void) | undefined | — | |
open?inherited | boolean | undefined | — | |
side? | "top" | "right" | "bottom" | "left" | undefined | — | |
sideOffset? | number | undefined | — |
TooltipProvider props
Type: TooltipProviderProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
childreninherited | ReactNode | — | |
delayDuration?inherited | number | undefined | — | The duration from when the pointer enters the trigger until the tooltip gets opened. |
disableHoverableContent?inherited | boolean | undefined | — | When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger. |
skipDelayDuration?inherited | number | undefined | — | How much time a user has to enter another trigger without incurring a delay again. |
Guidelines
Do
- Use it to name or explain a control the reader is already pointing at — an icon button, a truncated value, a dense chart mark.
- Keep `content` to a phrase; a tooltip that needs a sentence is a popover or a line of text on the page.
Don't
- Put links or buttons inside a tooltip: it is not focusable, and anything interactive inside it is unreachable.
- Rely on it as the only label of an icon control — pass `label` to the control itself.
Accessibility
The tooltip opens on hover and on keyboard focus, is connected to the trigger with `aria-describedby`, and Escape dismisses it. It never receives focus, so it cannot hold interactive content.
What happens on the server, and when hydration changes it.
Family
Overlays
Content that leaves the flow, or reveals itself in place — and the focus contract that has to come with it.
10 documented entries in this family. Open the family index
Related