Fix z-index issue with tooltip content (#851)

cartridge-gg · Oct 11, 2024 · 0e2adfe · 0e2adfe
1 parent a426b3a
commit 0e2adfe
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/packages/profile/src/components/navigation.tsx b/packages/profile/src/components/navigation.tsx
@@ -56,7 +56,7 @@ function Item({
             />
           </div>
         </TooltipTrigger>
-        <TooltipContent side="bottom">
+        <TooltipContent>
           <p className="capitalize">{variant}</p>
         </TooltipContent>
       </Tooltip>

diff --git a/packages/ui-next/src/components/network.tsx b/packages/ui-next/src/components/network.tsx
@@ -45,7 +45,7 @@ export function Network({ chainId }: { chainId: string }) {
             <div>{getChainName(chainId)}</div>
           </Button>
         </TooltipTrigger>
-        <TooltipContent side="bottom" className="bg-background">
+        <TooltipContent>
           <div>{hexToString(chainId as Hex)}</div>
         </TooltipContent>
       </Tooltip>

diff --git a/packages/ui-next/src/components/primitives/tooltip.tsx b/packages/ui-next/src/components/primitives/tooltip.tsx
@@ -4,8 +4,15 @@ import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 import { cn } from "@/utils";
+import { createPortal } from "react-dom";
 
-const TooltipProvider = TooltipPrimitive.Provider;
+const TooltipProvider = ({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => (
+  <TooltipPrimitive.Provider delayDuration={delayDuration} {...props} />
+);
+TooltipProvider.displayName = TooltipPrimitive.Provider.displayName;
 
 const Tooltip = TooltipPrimitive.Root;
 
@@ -14,17 +21,21 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md bg-secondary px-3 py-1.5 text-xs text-secondary-foreground 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}
-  />
-));
+>(({ className, sideOffset = 4, side = "bottom", ...props }, ref) =>
+  createPortal(
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      side={side}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-background px-3 py-1.5 text-xs text-secondary-foreground 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 delay-0 duration-75",
+        className,
+      )}
+      {...props}
+    />,
+    document.body,
+  ),
+);
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };