Tooltip
Short label shown on hover/focus; delay 0 by default.
import { Tooltip } from "@cynco-labs/ui";Example
import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@cynco-labs/ui";
export default function TooltipDemo() {
return (
<div className="pt-10 pl-8">
<Tooltip defaultOpen>
<TooltipTrigger render={<Button variant="secondary" />}>Hover me</TooltipTrigger>
<TooltipContent>Due 30 days after the invoice date</TooltipContent>
</Tooltip>
</div>
);
}Use
Naming icon-only controls and clarifying terms.
Props
TooltipTrigger (with render) and TooltipContent (side, align). Tooltip brings its own provider.
Notes
Keep it to one line.