feat: add tooltip (#1335)

* feat: add tooltip

* add `@radix-ui/react-tooltip` package

* update styles & add story

---------

Co-authored-by: BrickheadJohnny <[email protected]>

package.json

@@ -49,6 +49,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@snyk/protect": "latest",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/react-query": "^5.26.3",

src/app/globals.css

@@ -13,6 +13,9 @@
     --popover: 0 0% 100%;
     --popover-foreground: 224 71.4% 4.1%;
 
+    --tooltip: 0 0% 0%;
+    --tooltip-foreground: 0 0% 100%;
+
     --primary: 239 84% 67%;
     --primary-hover: 243 75% 59%;
     --primary-active: 245 58% 51%;
@@ -57,6 +60,9 @@
     --popover: 240 5.26% 26.08%;
     --popover-foreground: 240 2% 58%;
 
+    --tooltip: 240 5% 84%;
+    --tooltip-foreground: 240 4% 16%;
+
     --primary: 238.73 70% 63%;
     --primary-hover: 234 89% 74%;
     --primary-active: 230 94% 82%;

src/v2/components/ui/Tooltip.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "./Button"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip"
+
+const TooltipExample = () => (
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline" size="sm">
+          Hover me!
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>This is a tooltip!</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+)
+
+const meta: Meta<typeof TooltipExample> = {
+  title: "Design system/Tooltip",
+  component: TooltipExample,
+}
+
+export default meta
+
+type Story = StoryObj<typeof TooltipExample>
+
+export const Default: Story = {}

src/v2/components/ui/Tooltip.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip: React.FC<
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>
+> = ({ ...props }) => <TooltipPrimitive.Root delayDuration={0} {...props} />
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, children, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "bg-tooltip text-tooltip-foreground z-50 overflow-hidden rounded-xl px-3 py-1.5 text-sm shadow-md duration-0 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}
+  >
+    {children}
+    {/* <TooltipPrimitive.Arrow className="fill-popover-foreground" /> */}
+  </TooltipPrimitive.Content>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

tailwind.config.ts

@@ -69,6 +69,10 @@ const config = {
           DEFAULT: "hsl(var(--popover))",
           foreground: "hsl(var(--popover-foreground))",
         },
+        tooltip: {
+          DEFAULT: "hsl(var(--tooltip))",
+          foreground: "hsl(var(--tooltip-foreground))",
+        },
         card: {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",