feat: option to pass classes for trigger and content of ToolTip (#148)

* feat: option to plass classes for trigger and content of tooltip, for full customisation. * fix: added fallback is classes are empty
raystack · Sep 26, 2024 · 52a1d2a · 52a1d2a
1 parent c0ffd6d
commit 52a1d2a
Show file tree

Hide file tree

Showing 3 changed files with 9,646 additions and 7,493 deletions.
diff --git a/packages/raystack/package.json b/packages/raystack/package.json
@@ -44,20 +44,15 @@
     "postcss": "^8.4.24",
     "postcss-modules": "^6.0.0",
     "react": "^18.2.0",
+    "release-it": "^16.2.1",
     "rollup": "^3.25.1",
     "rollup-plugin-postcss": "^4.0.2",
     "semver": "^7.6.0",
     "tsconfig": "workspace:*",
-    "typescript": "~5.4.3",
-    "release-it": "^16.2.1"
+    "typescript": "~5.4.3"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-toggle-group": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.7",
-    "react-day-picker": "^9.0.4",
-    "react-loading-skeleton": "^3.4.0",
-    "sonner": "^1.5.0",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
@@ -71,13 +66,19 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
-    "usehooks-ts": "^2.9.1",
-    "class-variance-authority": "^0.6.0",
-    "cmdk": "^0.2.0",
-    "dayjs": "^1.11.11",
+    "@radix-ui/react-toggle-group": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/match-sorter-utils": "^8.8.4",
     "@tanstack/react-table": "^8.9.2",
     "@tanstack/table-core": "^8.9.2",
-    "react-select": "^5.7.7"
+    "class-variance-authority": "^0.6.0",
+    "clsx": "^2.1.1",
+    "cmdk": "^0.2.0",
+    "dayjs": "^1.11.11",
+    "react-day-picker": "^9.0.4",
+    "react-loading-skeleton": "^3.4.0",
+    "react-select": "^5.7.7",
+    "sonner": "^1.5.0",
+    "usehooks-ts": "^2.9.1"
   }
 }
diff --git a/packages/raystack/tooltip/tooltip.tsx b/packages/raystack/tooltip/tooltip.tsx
@@ -2,33 +2,42 @@ import React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { Text } from "../text";
 import styles from "./tooltip.module.css";
+import clsx from "clsx";
 
+type classes = {
+  content?: string;
+  trigger?: string;
+};
 interface TooltipProps {
   disabled?: boolean;
   children: React.ReactNode;
   message: React.ReactNode;
   side?: "top" | "right" | "bottom" | "left";
+  classes?: classes;
 }
 
 export const Tooltip = ({
   children,
   message,
   disabled,
   side = "right",
+  classes,
 }: TooltipProps) => {
   return disabled ? (
     children
   ) : (
     <TooltipPrimitive.Provider>
       <TooltipPrimitive.Root disableHoverableContent={false}>
         <TooltipPrimitive.Trigger asChild>
-          <div className={styles.trigger}>{children}</div>
+          <div className={clsx(styles.trigger, classes?.trigger ?? "")}>
+            {children}
+          </div>
         </TooltipPrimitive.Trigger>
         <TooltipPrimitive.Portal>
           <TooltipPrimitive.Content
             side={side}
             sideOffset={5}
-            className={styles.content}
+            className={clsx(styles.content, classes?.content ?? "")}
           >
             {typeof message === "string" ? <Text>{message}</Text> : message}
           </TooltipPrimitive.Content>