Only render the header Tooltip components when it's being hovered

Author: matt-aitken

apps/webapp/app/components/primitives/Table.tsx

@@ -157,6 +157,8 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
         break;
     }
 
+    const [isHovered, setIsHovered] = useState(false);
+
     return (
       <th
         ref={ref}
@@ -168,6 +170,8 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
         )}
         colSpan={colSpan}
         tabIndex={-1}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
       >
         {hiddenLabel ? (
           <span className="sr-only">{children}</span>
@@ -179,7 +183,11 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
             })}
           >
             {children}
-            <InfoIconTooltip content={tooltip} contentClassName="normal-case tracking-normal" />
+            <InfoIconTooltip
+              content={tooltip}
+              contentClassName="normal-case tracking-normal"
+              enabled={isHovered}
+            />
           </div>
         ) : (
           children

apps/webapp/app/components/primitives/Tooltip.tsx

@@ -113,18 +113,23 @@ export function InfoIconTooltip({
   contentClassName,
   variant = "basic",
   disableHoverableContent = false,
+  enabled = true,
 }: {
   content: React.ReactNode;
   buttonClassName?: string;
   contentClassName?: string;
   variant?: Variant;
   disableHoverableContent?: boolean;
+  enabled?: boolean;
 }) {
+  const icon = (
+    <InformationCircleIcon className={cn("size-3.5 text-text-dimmed", buttonClassName)} />
+  );
+
+  if (!enabled) return icon;
   return (
     <SimpleTooltip
-      button={
-        <InformationCircleIcon className={cn("size-3.5 text-text-dimmed", buttonClassName)} />
-      }
+      button={icon}
       content={content}
       variant={variant}
       className={contentClassName}