From dcc08863058772eeac4da26a712d3300f10b1e50 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 29 Feb 2024 17:59:26 -0700
Subject: [PATCH] Fix tooltips (#10154)

* use portal for tooltips

* Fix tooltips for desktop and mobile nav bars

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
---
 web/src/components/navigation/NavItem.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/src/components/navigation/NavItem.tsx b/web/src/components/navigation/NavItem.tsx
index 9e27c01fa..4725d0eb1 100644
--- a/web/src/components/navigation/NavItem.tsx
+++ b/web/src/components/navigation/NavItem.tsx
@@ -6,6 +6,8 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useState } from "react";
+import { isDesktop } from "react-device-detect";
 
 const variants = {
   primary: {
@@ -39,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}
@@ -50,6 +54,8 @@ 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]" />