chore: add Tooltip component (#16444)

BrunoQuaresma · web-flow · commit f45277a2ebc3 · 2025-02-05T16:53:45.000-03:00
Based on https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=489-4332&m=dev <img width="110" alt="Screenshot 2025-02-05 at 10 45 27" src="https://github.com/user-attachments/assets/8fb9cda8-fdca-49ba-8f11-a40058570d1a" />
diff --git a/site/package.json b/site/package.json
@@ -60,6 +60,7 @@
 		"@radix-ui/react-slider": "1.2.2",
 		"@radix-ui/react-slot": "1.1.1",
 		"@radix-ui/react-switch": "1.1.1",
+		"@radix-ui/react-tooltip": "1.1.7",
 		"@radix-ui/react-visually-hidden": "1.1.0",
 		"@tanstack/react-query-devtools": "4.35.3",
 		"@xterm/addon-canvas": "0.7.0",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/components/Tooltip/Tooltip.stories.tsx b/site/src/components/Tooltip/Tooltip.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "components/Button/Button";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "./Tooltip";
+
+const meta: Meta<typeof TooltipProvider> = {
+	title: "components/Tooltip",
+	component: TooltipProvider,
+	args: {
+		children: (
+			<>
+				<TooltipProvider>
+					<Tooltip open>
+						<TooltipTrigger asChild>
+							<Button variant="outline">Hover</Button>
+						</TooltipTrigger>
+						<TooltipContent>Add to library</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			</>
+		),
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {};
diff --git a/site/src/components/Tooltip/Tooltip.tsx b/site/src/components/Tooltip/Tooltip.tsx
@@ -0,0 +1,34 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+/**
+ * Copied from shadc/ui on 02/05/2025
+ * @see {@link https://ui.shadcn.com/docs/components/tooltip}
+ */
+import * as React from "react";
+import { cn } from "utils/cn";
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+
+export const Tooltip = TooltipPrimitive.Root;
+
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+
+export const TooltipContent = React.forwardRef<
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Portal>
+		<TooltipPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 overflow-hidden rounded-md bg-surface-primary px-3 py-2 text-xs font-medium text-content-secondary",
+				"border border-solid border-border 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",
+				className,
+			)}
+			{...props}
+		/>
+	</TooltipPrimitive.Portal>
+));
