Tooltip
Tooltip trigger and wrapper primitives for contextual help.
Loading preview...
Installation
pnpm dlx shadcn@latest add @circle-ui/tooltipNew to Circle? Get started.
About
Use this for short contextual help that should appear next to an info trigger or a custom child element.
Usage
import { Button, Tooltip, TooltipWrapper } from "@circle/ui";
<Tooltip
content="Your results will be reviewed before they are shared."
side="right"
width={240}
/>
<TooltipWrapper
content="Use TooltipWrapper when you already have a trigger element."
side="top"
align="center"
variant="dark"
width={260}
>
<Button size="small" variant="secondary">
Hover for context
</Button>
</TooltipWrapper>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | React.ReactNode | - | Tooltip body. If omitted, Tooltip renders nothing and TooltipWrapper returns its child unchanged. |
| side | "top" | "right" | "bottom" | "left" | "left" | Preferred side of the trigger for the tooltip content. |
| width | number | 204 | Tooltip content width in pixels. |
| variant | "default" | "dark" | "default" | Visual style for the tooltip content and arrow. |
| ariaLabel | string | "Tooltip" | Accessible label for the default info trigger. |
| children | React.ReactElement | - | TooltipWrapper only. The custom trigger element that receives Radix trigger behavior. |
| open / onOpenChange / defaultOpen | boolean / (open: boolean) => void / boolean | - | TooltipWrapper only. Use these when the tooltip open state needs to be controlled. |
| dismissible / onDismiss | boolean / () => void | - | TooltipWrapper only. Adds a close action for the default variant and notifies when it is dismissed. |
Dependencies
Registry
@circle-ui/utils
npm
@radix-ui/react-tooltip
Source
pnpm dlx shadcn@latest add https://registry.circle.health/circle-ui/tooltip.json