diff --git a/web/src/components/navigation/NavItem.tsx b/web/src/components/navigation/NavItem.tsx
index 0294ef7ad..e19ff92a2 100644
--- a/web/src/components/navigation/NavItem.tsx
+++ b/web/src/components/navigation/NavItem.tsx
@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/tooltip";
 import { useState } from "react";
 import { isDesktop } from "react-device-detect";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 const variants = {
   primary: {
@@ -61,9 +62,11 @@ export default function NavItem({
             <Icon className="size-5 md:m-[6px]" />
           </TooltipTrigger>
         </NavLink>
-        <TooltipContent side="right">
-          <p>{title}</p>
-        </TooltipContent>
+        <TooltipPortal>
+          <TooltipContent side="right">
+            <p>{title}</p>
+          </TooltipContent>
+        </TooltipPortal>
       </Tooltip>
     )
   );