From a9117c2d36b6e2d8807648865aecbfae0a0765d7 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Tue, 6 Dec 2022 19:27:02 +0530
Subject: [PATCH] fix: use tooltip portal (#5889)

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
---
 packages/ui/components/button/Button.tsx |  3 +--
 packages/ui/v2/core/Tooltip.tsx          | 24 +++++++++++++-----------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index a308025917..3979602994 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -5,8 +5,7 @@ import { Icon } from "react-feather";
 
 import classNames from "@calcom/lib/classNames";
 import { applyStyleToMultipleVariants } from "@calcom/lib/cva";
-
-import Tooltip from "../../v2/core/Tooltip";
+import { Tooltip } from "@calcom/ui";
 
 type InferredVariantProps = VariantProps<typeof buttonClasses>;
 
diff --git a/packages/ui/v2/core/Tooltip.tsx b/packages/ui/v2/core/Tooltip.tsx
index 9bead1ad1b..5049dd93a1 100644
--- a/packages/ui/v2/core/Tooltip.tsx
+++ b/packages/ui/v2/core/Tooltip.tsx
@@ -26,18 +26,20 @@ export function Tooltip({
       defaultOpen={defaultOpen}
       onOpenChange={onOpenChange}>
       <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-      <TooltipPrimitive.Content
-        className={classNames(
-          side === "top" && "-mt-7",
-          side === "right" && "ml-2",
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+          className={classNames(
+            side === "top" && "-mt-7",
+            side === "right" && "ml-2",
 
-          "relative z-40 rounded-md bg-gray-900 px-2 py-1 text-xs font-semibold text-white shadow-lg dark:bg-white dark:text-gray-600"
-        )}
-        side={side}
-        align="center"
-        {...props}>
-        {content}
-      </TooltipPrimitive.Content>
+            "relative z-40 rounded-md bg-gray-900 px-2 py-1 text-xs font-semibold text-white shadow-lg dark:bg-white dark:text-gray-600"
+          )}
+          side={side}
+          align="center"
+          {...props}>
+          {content}
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
     </TooltipPrimitive.Root>
   );
 }