Tooltip
A short label on hover
Hover
Booked revenue, net of refunds.
Controlled
First runSearch the workspace
Installation
npx shadcn@latest add @sudokw/primitives-tooltipimport { Tooltip } from "@gpuixui/primitives";Usage
import { Icon } from "@gpuixui/icons";
import { IconButton, Tooltip, useTheme } from "@gpuixui/primitives";
const theme = useTheme();
export const RevenueHelp = () => (
<Tooltip content="Booked revenue, net of refunds." side="bottom">
<IconButton
icon={
<Icon
color={theme.colors.mutedForeground}
name="info"
size={theme.iconSize.sm}
/>
}
label="Revenue definition"
/>
</Tooltip>
);Composition
Tooltip
├── trigger
└── tipAPI reference
| Prop | Type | Default | Consequence |
|---|---|---|---|
content | ReactNode | — (required) | the label; keep it short, the runtime does not wrap overlay content |
description | string | content when it is a string | the trigger's accessible description; required for a non-text tip |
children | ReactNode | — (required) | the trigger: a focusable host element, or a control that forwards the trigger pair |
side | FloatingSide | "top" | the preferred side; the runtime moves the layer when it would leave the window |
align | FloatingAlign | "center" | alignment against the trigger |
delay | number | the provider's 0 | the hover delay in milliseconds |
open | boolean | the runtime's state | takes the open state; the tip paints only while it is true |
defaultOpen | boolean | false | starts open before any interaction; ignored while open is set |
onOpenChange | (open: boolean) => void | — | every state the runtime asked for, controlled or not |
disableHoverableContent | boolean | false | close as soon as the pointer leaves the trigger, instead of letting it cross onto the tip |
reducedMotion | boolean | the provider's preference (false when none) | removes the journey — the tip lands at once and a close unmounts at once instead of holding the exit; the prop wins |
className | string | — | joined after the tip's recipe, so it wins conflicts |
style | StyleDesc | — | merged after the recipe and className, so it is the last word |
testId | string | — | lands on the tip's surface |
TooltipProvider sets one timing for every tip below it.
| Prop | Type | Default | Consequence |
|---|---|---|---|
delay | number | the runtime's 0 | milliseconds before a tip opens; a tip's own delay wins |
skipDelay | number | the runtime's 300 | the window after a close in which the next tip opens with no wait |
disableHoverableContent | boolean | the runtime's false | close as soon as the pointer leaves the trigger, for every tip below |
children | ReactNode | — (required) | the tree the provider covers |
Edit this page on GitHubapps/docs/content/docs/components/tooltip.mdx