feat: add tooltips to toolbar

package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-slider": "^1.2.2",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.464.0",

src/components/toolbar/index.tsx

@@ -2,6 +2,7 @@ import { useContext } from "react";
 import { EraserIcon, HandIcon, PencilIcon, ZoomInIcon } from "lucide-react";
 
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { ToolContext } from "@/context/Tool";
 
 function Toolbar() {
@@ -10,25 +11,62 @@ function Toolbar() {
 	const onToolChange = (value: string) => setTool(value as Tool);
 
 	return (
+		<TooltipProvider>
 			<ToggleGroup
 				type="single"
 				value={tool}
 				onValueChange={onToolChange}
 				className="flex flex-col justify-start py-1 border-r border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950"
 			>
+				{/* Hand */}
+				<Tooltip delayDuration={0}>
+					<TooltipTrigger>
 						<ToggleGroupItem value="hand" className="!p-0 !h-8 !min-w-8">
 							<HandIcon />
 						</ToggleGroupItem>
+					</TooltipTrigger>
+					<TooltipContent side="right" sideOffset={10}>
+						<p>Hand (1)</p>
+					</TooltipContent>
+				</Tooltip>
+
+				{/* Pencil */}
+				<Tooltip delayDuration={0}>
+					<TooltipTrigger>
 						<ToggleGroupItem value="pencil" className="!p-0 !h-8 !min-w-8">
 							<PencilIcon />
 						</ToggleGroupItem>
+					</TooltipTrigger>
+					<TooltipContent side="right" sideOffset={10}>
+						<p>Pencil (2)</p>
+					</TooltipContent>
+				</Tooltip>
+
+				{/* Eraser */}
+				<Tooltip delayDuration={0}>
+					<TooltipTrigger>
 						<ToggleGroupItem value="eraser" className="!p-0 !h-8 !min-w-8">
 							<EraserIcon />
 						</ToggleGroupItem>
+					</TooltipTrigger>
+					<TooltipContent side="right" sideOffset={10}>
+						<p>Eraser (3)</p>
+					</TooltipContent>
+				</Tooltip>
+
+				{/* Zoom */}
+				<Tooltip delayDuration={0}>
+					<TooltipTrigger>
 						<ToggleGroupItem value="zoom" className="!p-0 !h-8 !min-w-8">
 							<ZoomInIcon />
 						</ToggleGroupItem>
+					</TooltipTrigger>
+					<TooltipContent side="right" sideOffset={10}>
+						<p>Zoom (4)</p>
+					</TooltipContent>
+				</Tooltip>
 			</ToggleGroup>
+		</TooltipProvider>
 	);
 }
 

src/components/ui/tooltip.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }