feat: improve tooltip support

anoma · Aug 13, 2024 · b059211 · b059211
1 parent e039f1c
commit b059211
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/apps/namadillo/src/App/Common/SyncIndicator.tsx b/apps/namadillo/src/App/Common/SyncIndicator.tsx
@@ -16,11 +16,11 @@ export const SyncIndicator = (): JSX.Element => {
           syncStatus.isError ? "bg-red-500" : undefined
         )}
       />
-      <Tooltip>
+      <Tooltip className="whitespace-nowrap">
         {syncStatus.isSyncing ?
           "Syncing"
         : syncStatus.isError ?
-          `Error syncing: ${syncStatus.error}`
+          "Error syncing"
         : "Fully synced"}
       </Tooltip>
     </div>

diff --git a/packages/components/src/Tooltip.tsx b/packages/components/src/Tooltip.tsx
@@ -1,9 +1,8 @@
-import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 
 type TooltipProps = {
   children: React.ReactNode;
-  position?: "top" | "bottom";
+  position?: "top" | "bottom" | "left" | "right";
 } & React.ComponentPropsWithoutRef<"span">;
 
 // Use group/tooltip class in the parent element that will trigger the Tooltip
@@ -16,20 +15,21 @@ export const Tooltip = ({
   return (
     <span
       className={twMerge(
-        clsx(
-          "flex bg-rblack text-xs absolute opacity-0 pointer-events-none",
-          "text-white rounded-sm px-4 py-1 left-1/2 -translate-x-1/2",
-          "transition-all duration-500 ease-out-expo",
-          "group-hover/tooltip:visible group-hover/tooltip:opacity-100",
-          "group-hover/tooltip:pointer-events-auto",
-          {
-            "top-0 -translate-y-1/2 group-hover/tooltip:-translate-y-full":
-              position === "top",
-            "bottom-0 translate-y-1/2 group-hover/tooltip:translate-y-full":
-              position === "bottom",
-          },
-          className
-        )
+        "flex bg-rblack text-xs absolute opacity-0 pointer-events-none",
+        "text-white rounded-sm px-4 py-1",
+        "transition-all duration-500 ease-out-expo",
+        "group-hover/tooltip:visible group-hover/tooltip:opacity-100",
+        "group-hover/tooltip:pointer-events-auto",
+        "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+        position === "top" &&
+          "top-0 -translate-y-1/2 group-hover/tooltip:-translate-y-full",
+        position === "bottom" &&
+          "bottom-0 translate-y-1/2 group-hover/tooltip:translate-y-full",
+        position === "left" &&
+          "left-0 -translate-x-1/2 group-hover/tooltip:-translate-x-full",
+        position === "right" &&
+          "right-0 translate-x-1/2 group-hover/tooltip:translate-x-full",
+        className
       )}
       {...props}
     >