fix(tooltip): wrap TooltipContent in a Portal for improved rendering (#6458)

Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableColumns.tsx

@@ -283,12 +283,13 @@ export const generateResponseTableColumns = (
             <TooltipTrigger>
               <CircleHelpIcon className="h-3 w-3 text-slate-500" strokeWidth={1.5} />
             </TooltipTrigger>
-            <TooltipContent side="bottom" className="font-normal">
-              {t("environments.surveys.responses.how_to_identify_users")}
+            <TooltipContent side="bottom" className="space-x-1 font-normal">
+              <span>{t("environments.surveys.responses.how_to_identify_users")}</span>
               <Link
                 className="underline underline-offset-2 hover:text-slate-900"
                 href="https://formbricks.com/docs/app-surveys/user-identification"
-                target="_blank">
+                target="_blank"
+                rel="noopener noreferrer">
                 {t("common.app_survey")}
               </Link>
             </TooltipContent>

apps/web/modules/ui/components/tooltip/index.test.tsx

@@ -30,6 +30,11 @@ vi.mock("@radix-ui/react-tooltip", () => ({
       {children}
     </div>
   ),
+  Portal: ({ children, ...props }: any) => (
+    <div data-testid="tooltip-portal" {...props}>
+      {children}
+    </div>
+  ),
 }));
 
 describe("Tooltip", () => {

apps/web/modules/ui/components/tooltip/index.tsx

@@ -18,15 +18,17 @@ const TooltipContent: React.ComponentType<TooltipPrimitive.TooltipContentProps>
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md",
-      className
-    )}
-    {...props}
-  />
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;