Tooltip
A short plain-text label on hover or focus, after a delay.
<Tooltip content="Roll back to v47">
<Button>Roll back</Button>
</Tooltip>Props
side
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/tooltip.jsonThe CLI writes components/ikada/tooltip.tsx and merges the ikada theme into your CSS. Or take it from the package: import { TooltipProvider, Tooltip } from "@sproutboat/ikada";
Usage
import { TooltipProvider, Tooltip } from "@/components/ikada/tooltip";
<Tooltip content="Roll back to v47">
<Button>Roll back</Button>
</Tooltip>Examples
<Tooltip content="Roll back to v47">
<Button>Roll back</Button>
</Tooltip><Tooltip content="Opens on the top" side="top">
<Button>top</Button>
</Tooltip>
<Tooltip content="Opens on the bottom" side="bottom">
<Button>bottom</Button>
</Tooltip>
<Tooltip content="Opens on the start" side="start">
<Button>start</Button>
</Tooltip>
<Tooltip content="Opens on the end" side="end">
<Button>end</Button>
</Tooltip><Tooltip content="Copy robin.sproutboat.app" delay={0}>
<Button>Copy</Button>
</Tooltip>Props
| Prop | Type | Description |
|---|---|---|
| contentrequired | ReactNode | Short plain text. Anything interactive belongs in a Popover. |
| childrenrequired | ReactElement<unknown, string | JSXElementConstructor<any>> | The element that triggers the tooltip; it receives the trigger props. |
| side | "top" | "bottom" | "start" | "end" | Which side of the trigger the popup opens on. Flips when there is no room. Default `top`. |
| delay | number | Milliseconds before it opens on hover. Default from TooltipProvider (450). |
| defaultOpen | boolean | Whether it starts open (uncontrolled). |
| className | string | Classes merged onto the root element, after ikada's own. |
Source: src/components/tooltip.tsx