Foundations
Tooltip
Hint anchored to its trigger: scales in from the trigger side, opens instantly once one is warm.
2 variantsMIT
Preview
Hover one, then slide across — the rest open instantly.
Installation
Copies the component into components/ui and installs its dependencies and theme tokens.
pnpm dlx shadcn@latest add https://tuffui.com/r/tooltip-hint.jsonUsage
Pass your own data and wire the callbacks to your agent runtime.
import { Tooltip } from "@/components/ui/tooltip-hint";
<Tooltip content="Regenerate">
<IconButton icon={ArrowClockwise} label="Regenerate" />
</Tooltip>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content* | ReactNode | — | Tooltip text. |
| children* | ReactElement | — | One focusable trigger; it gets aria-describedby while open. |
| side | "top" | "bottom" | "top" | Which side of the trigger. |
| align | "start" | "center" | "end" | "center" | Alignment; the tooltip scales from that corner. |
| delay | number | 300 | First-hover delay in ms. Focus and warm hovers open instantly. |