From 3f996cd62c0334552b370e8584ffc8dcd76197c6 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 27 Aug 2024 20:14:22 -0500
Subject: [PATCH] Add portal the live player tooltip (#13389)

---
 web/src/components/player/LivePlayer.tsx | 31 +++++++++++++-----------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 9a0b6f3db..79de3b5a2 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -18,6 +18,7 @@ import Chip from "../indicators/Chip";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { cn } from "@/lib/utils";
 import { TbExclamationCircle } from "react-icons/tb";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 type LivePlayerProps = {
   cameraRef?: (ref: HTMLDivElement | null) => void;
@@ -258,20 +259,22 @@ export default function LivePlayer({
                   </div>
                 </TooltipTrigger>
               </div>
-              <TooltipContent className="capitalize">
-                {[
-                  ...new Set([
-                    ...(objects || []).map(({ label, sub_label }) =>
-                      label.endsWith("verified") ? sub_label : label,
-                    ),
-                  ]),
-                ]
-                  .filter((label) => label?.includes("-verified") == false)
-                  .map((label) => capitalizeFirstLetter(label))
-                  .sort()
-                  .join(", ")
-                  .replaceAll("-verified", "")}
-              </TooltipContent>
+              <TooltipPortal>
+                <TooltipContent className="capitalize">
+                  {[
+                    ...new Set([
+                      ...(objects || []).map(({ label, sub_label }) =>
+                        label.endsWith("verified") ? sub_label : label,
+                      ),
+                    ]),
+                  ]
+                    .filter((label) => label?.includes("-verified") == false)
+                    .map((label) => capitalizeFirstLetter(label))
+                    .sort()
+                    .join(", ")
+                    .replaceAll("-verified", "")}
+                </TooltipContent>
+              </TooltipPortal>
             </Tooltip>
           </div>
         )}