const TOOLS = [
{ label: "Bold", Icon: Bold },
{ label: "Italic", Icon: Italic },
{ label: "Underline", Icon: Underline },
{ label: "Link", Icon: Link },
];
export function TooltipToolbarDemo() {
return (
<TooltipProvider delayDuration={300}>
<div className="flex gap-1 rounded-lg border p-1">
{TOOLS.map(({ label, Icon }) => (
<Tooltip key={label}>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" aria-label={label}>
<Icon />
</Button>
</TooltipTrigger>
<TooltipContent>{label}</TooltipContent>
</Tooltip>
))}
</div>
</TooltipProvider>
);
}import { Button } from "@/components/ui/button";import {Tooltip,TooltipContent,TooltipProvider,TooltipTrigger,} from "@/components/ui/tooltip";export function TooltipDemo() {return ( <TooltipProvider> <Tooltip> <TooltipTrigger asChild> <Button variant="outline">Hover</Button> </TooltipTrigger> <TooltipContent> <p>Add to library</p> </TooltipContent> </Tooltip> </TooltipProvider>);}