From 9e0d2ba787c8b742aa2ce9e4684df7d7343152b0 Mon Sep 17 00:00:00 2001 From: DEEPAK KUMAR MANDAL Date: Sun, 4 Aug 2024 22:16:44 +0530 Subject: [PATCH] feat: tool tip component --- package.json | 1 + pnpm-lock.yaml | 58 +++++++++++++++++++++++++++ src/App.tsx | 12 ++++++ src/components/ui/ToolTip/ToolTip.tsx | 38 ++++++++++++++++++ src/components/ui/ToolTip/index.ts | 1 + src/components/ui/index.ts | 1 + 6 files changed, 111 insertions(+) create mode 100644 src/components/ui/ToolTip/ToolTip.tsx create mode 100644 src/components/ui/ToolTip/index.ts diff --git a/package.json b/package.json index 6fcebb4..f571eed 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-tooltip": "^1.1.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "lucide-react": "^0.417.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e9aa66..d16bc07 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ importers: '@radix-ui/react-slot': specifier: ^1.1.0 version: 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-tooltip': + specifier: ^1.1.2 + version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) class-variance-authority: specifier: ^0.7.0 version: 0.7.0 @@ -855,6 +858,19 @@ packages: '@types/react': optional: true + '@radix-ui/react-tooltip@1.1.2': + resolution: {integrity: sha512-9XRsLwe6Yb9B/tlnYCPVUd/TFS4J7HuOZW345DCeC6vKIxQGMZdx21RK4VoZauPD5frgkXTYVS5y90L+3YBn4w==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-use-callback-ref@1.1.0': resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==} peerDependencies: @@ -918,6 +934,19 @@ packages: '@types/react': optional: true + '@radix-ui/react-visually-hidden@1.1.0': + resolution: {integrity: sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/rect@1.1.0': resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==} @@ -3631,6 +3660,26 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 + '@radix-ui/react-tooltip@1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-popper': 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-portal': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.3 + '@types/react-dom': 18.3.0 + '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.3)(react@18.3.1)': dependencies: react: 18.3.1 @@ -3677,6 +3726,15 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 + '@radix-ui/react-visually-hidden@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.3 + '@types/react-dom': 18.3.0 + '@radix-ui/rect@1.1.0': {} '@rollup/rollup-android-arm-eabi@4.18.1': diff --git a/src/App.tsx b/src/App.tsx index e53ce8c..910a6e4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,6 +14,7 @@ import { Checkbox, Typography, ContextMenu, + Tooltip, } from "@Components/ui"; const App = () => ( @@ -170,6 +171,17 @@ const App = () => ( hello + + + + + + + + Tooltip content + + + ); diff --git a/src/components/ui/ToolTip/ToolTip.tsx b/src/components/ui/ToolTip/ToolTip.tsx new file mode 100644 index 0000000..df8e15f --- /dev/null +++ b/src/components/ui/ToolTip/ToolTip.tsx @@ -0,0 +1,38 @@ +import * as TooltipPrimitive from "@radix-ui/react-tooltip"; +import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"; +import { cn } from "@Utils/className"; + +interface TooltipProps extends TooltipPrimitive.TooltipProps { + Trigger?: typeof TooltipTrigger; + Content?: typeof TooltipContent; + Provider?: typeof TooltipProvider; +} + +const Tooltip = ({ children, ...rest }: TooltipProps) => ( + {children} +); + +const TooltipProvider = TooltipPrimitive.Provider; +const TooltipTrigger = TooltipPrimitive.Trigger; + +const TooltipContent = forwardRef< + ElementRef, + ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + +)); +TooltipContent.displayName = TooltipPrimitive.Content.displayName; + +Tooltip.Trigger = TooltipTrigger; +Tooltip.Content = TooltipContent; +Tooltip.Provider = TooltipProvider; + +export { Tooltip }; diff --git a/src/components/ui/ToolTip/index.ts b/src/components/ui/ToolTip/index.ts new file mode 100644 index 0000000..ae68b0d --- /dev/null +++ b/src/components/ui/ToolTip/index.ts @@ -0,0 +1 @@ +export * from "./ToolTip"; diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts index 43ad1b6..8717183 100644 --- a/src/components/ui/index.ts +++ b/src/components/ui/index.ts @@ -12,3 +12,4 @@ export { Badge } from "./Badge"; export { Breadcrumb } from "./Breadcrumb"; export { Checkbox } from "./CheckBox"; export { ContextMenu } from "./ContextMenu"; +export { Tooltip } from "./ToolTip";