Tooltip
Short contextual label shown on hover or keyboard focus.
Add it to your project
Eject the complete tooltip group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject tooltipbash
npx toucan eject tooltipapp.tsx
import { Tooltip } from '@/components/toucan/tooltip';Use when
An unfamiliar control needs a brief supplementary label.
Avoid when
The content is essential, interactive, or lengthy.
Example
Top tooltip
Rich tooltip
Tooltips support structured content.
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Tooltip
Tooltip
Props type: TooltipProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
anchor | "left" | "right" | "top" | "bottom" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left-top" | "left-center" | "left-bottom" | "right-top" | "right-center" | "right-bottom" | 'top' | No | The edge or alignment used to position the floating content. |
content | React.ReactNode | — | Required | Content rendered inside the floating surface. |
maxWidth | string | undefined | No | Maximum CSS width of the floating content. |
onOpenChange | (open: boolean) => void | undefined | No | Called when the open state changes. |
open | boolean | undefined | No | Controlled open state. |
Also accepts the native content or div attributes that are not replaced by a Toucan prop.
Type exports
TooltipProps
Accessibility
- Appears on focus as well as hover and is associated through aria-describedby.
Token families
tooltip