diff --git a/web/src/components/navigation/NavItem.tsx b/web/src/components/navigation/NavItem.tsx
index 8eba96d2f..4725d0eb1 100644
--- a/web/src/components/navigation/NavItem.tsx
+++ b/web/src/components/navigation/NavItem.tsx
@@ -6,7 +6,8 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { TooltipPortal } from "@radix-ui/react-tooltip";
+import { useState } from "react";
+import { isDesktop } from "react-device-detect";
 
 const variants = {
   primary: {
@@ -40,9 +41,11 @@ export default function NavItem({
 }: NavItemProps) {
   const shouldRender = dev ? ENV !== "production" : true;
 
+  const [showTooltip, setShowTooltip] = useState(false);
+
   return (
     shouldRender && (
-      <Tooltip>
+      <Tooltip open={isDesktop && showTooltip}>
         <NavLink
           to={url}
           onClick={onClick}
@@ -51,16 +54,16 @@ export default function NavItem({
               variants[variant][isActive ? "active" : "inactive"]
             }`
           }
+          onMouseEnter={() => (isDesktop ? setShowTooltip(true) : null)}
+          onMouseLeave={() => (isDesktop ? setShowTooltip(false) : null)}
         >
           <TooltipTrigger>
             <Icon className="size-5 md:m-[6px]" />
           </TooltipTrigger>
-          <TooltipPortal>
-            <TooltipContent side="right">
-              <p>{title}</p>
-            </TooltipContent>
-          </TooltipPortal>
         </NavLink>
+        <TooltipContent side="right">
+          <p>{title}</p>
+        </TooltipContent>
       </Tooltip>
     )
   );
diff --git a/web/src/components/settings/SettingsNavItems.tsx b/web/src/components/settings/SettingsNavItems.tsx
index 9875ad298..db42775d3 100644
--- a/web/src/components/settings/SettingsNavItems.tsx
+++ b/web/src/components/settings/SettingsNavItems.tsx
@@ -58,7 +58,6 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import ActivityIndicator from "../ui/activity-indicator";
-import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 type SettingsNavItemsProps = {
   className?: string;
@@ -107,11 +106,9 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
                     <LuSettings />
                   </Button>
                 </TooltipTrigger>
-                <TooltipPortal>
-                  <TooltipContent side="right">
-                    <p>Settings</p>
-                  </TooltipContent>
-                </TooltipPortal>
+                <TooltipContent side="right">
+                  <p>Settings</p>
+                </TooltipContent>
               </Tooltip>
             </a>
           </DropdownMenuTrigger>
@@ -252,11 +249,9 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
               <VscAccount />
             </Button>
           </TooltipTrigger>
-          <TooltipPortal>
-            <TooltipContent side="right">
-              <p>Account</p>
-            </TooltipContent>
-          </TooltipPortal>
+          <TooltipContent side="right">
+            <p>Account</p>
+          </TooltipContent>
         </Tooltip>
       </div>
       {restartDialogOpen && (