From c4e81979ce49ef00e7d6bcfef9ad3ba7b74eae80 Mon Sep 17 00:00:00 2001
From: EthanHealy01 <ethan.healy.21@gmail.com>
Date: Wed, 13 Aug 2025 17:38:00 +0100
Subject: [PATCH] fix flashing tooltip issue

---
 .../components/shared/AllToolsNavButton.tsx    |  3 ++-
 .../src/components/shared/QuickAccessBar.tsx   |  2 +-
 frontend/src/components/shared/Tooltip.tsx     | 18 ++++++++++++------
 .../shared/quickAccessBar/TopToolIndicator.tsx |  2 +-
 .../shared/tooltip/Tooltip.module.css          |  1 -
 frontend/src/global.d.ts                       |  1 +
 6 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/shared/AllToolsNavButton.tsx b/frontend/src/components/shared/AllToolsNavButton.tsx
index cd1824693..79fd36ae1 100644
--- a/frontend/src/components/shared/AllToolsNavButton.tsx
+++ b/frontend/src/components/shared/AllToolsNavButton.tsx
@@ -29,7 +29,8 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
   );
 
   return (
-    <Tooltip content={'All tools'} sidebarTooltip>
+    
+    <Tooltip content={'All tools'} position="right" arrow containerStyle={{ marginTop: "-1rem" }} maxWidth={200}>
       <div className="flex flex-col items-center gap-1 mt-4 mb-2">
         <ActionIcon
           size={'lg'}
diff --git a/frontend/src/components/shared/QuickAccessBar.tsx b/frontend/src/components/shared/QuickAccessBar.tsx
index 5274249f6..cf1249a33 100644
--- a/frontend/src/components/shared/QuickAccessBar.tsx
+++ b/frontend/src/components/shared/QuickAccessBar.tsx
@@ -178,7 +178,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
           <Stack gap="lg" align="center">
             {buttonConfigs.slice(0, -1).map((config, index) => (
               <React.Fragment key={config.id}>
-                <Tooltip content={config.tooltip} sidebarTooltip>
+                <Tooltip content={config.tooltip} position="right" arrow containerStyle={{ marginTop: "-1rem" }} maxWidth={200}>
                   <div className="flex flex-col items-center gap-1" style={{ marginTop: index === 0 ? '0.5rem' : "0rem" }}>
                     <ActionIcon
                       size={isButtonActive(config) ? (config.size || 'xl') : 'lg'}
diff --git a/frontend/src/components/shared/Tooltip.tsx b/frontend/src/components/shared/Tooltip.tsx
index 812bd5733..9830bd22d 100644
--- a/frontend/src/components/shared/Tooltip.tsx
+++ b/frontend/src/components/shared/Tooltip.tsx
@@ -14,6 +14,7 @@ export interface TooltipProps {
   children: React.ReactElement;
   offset?: number;
   maxWidth?: number | string;
+  minWidth?: number | string;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   arrow?: boolean;
@@ -23,6 +24,7 @@ export interface TooltipProps {
     logo?: React.ReactNode;
   };
   delay?: number;
+  containerStyle?: React.CSSProperties;
 }
 
 export const Tooltip: React.FC<TooltipProps> = ({
@@ -32,13 +34,15 @@ export const Tooltip: React.FC<TooltipProps> = ({
   tips,
   children,
   offset: gap = 8,
-  maxWidth = 280,
+  maxWidth,
+  minWidth,
   open: controlledOpen,
   onOpenChange,
   arrow = false,
   portalTarget,
   header,
   delay = 0,
+  containerStyle={},
 }) => {
   const [internalOpen, setInternalOpen] = useState(false);
   const [isPinned, setIsPinned] = useState(false);
@@ -135,8 +139,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
       '';
   };
 
-  // Only show tooltip when position is ready and correct
-  const shouldShowTooltip = open && (sidebarTooltip ? positionReady : true);
+  // Always mount when open so we can measure; hide until positioned to avoid flash
+  const shouldShowTooltip = open;
 
   const tooltipElement = shouldShowTooltip ? (
     <div
@@ -145,11 +149,13 @@ export const Tooltip: React.FC<TooltipProps> = ({
         position: 'fixed',
         top: coords.top,
         left: coords.left,
-        maxWidth,
+        width: (maxWidth !== undefined ? maxWidth : '25rem'),
+        minWidth: minWidth,
         zIndex: 9999,
-        visibility: 'visible',
-        opacity: 1,
+        visibility: positionReady ? 'visible' : 'hidden',
+        opacity: positionReady ? 1 : 0,
         color: 'var(--text-primary)',
+        ...containerStyle,
       }}
       className={`${styles['tooltip-container']} ${isPinned ? styles.pinned : ''}`}
       onClick={handleTooltipClick}
diff --git a/frontend/src/components/shared/quickAccessBar/TopToolIndicator.tsx b/frontend/src/components/shared/quickAccessBar/TopToolIndicator.tsx
index bae269303..43f238498 100644
--- a/frontend/src/components/shared/quickAccessBar/TopToolIndicator.tsx
+++ b/frontend/src/components/shared/quickAccessBar/TopToolIndicator.tsx
@@ -68,7 +68,7 @@ const TopToolIndicator: React.FC<TopToolIndicatorProps> = ({ activeButton, setAc
         {indicatorTool && (
           <div className="current-tool-content">
             <div className="flex flex-col items-center gap-1">
-              <Tooltip content={isBackHover ? 'Back to all tools' : indicatorTool.name} sidebarTooltip>
+              <Tooltip content={isBackHover ? 'Back to all tools' : indicatorTool.name} position="right" arrow width={140}>
                 <ActionIcon
                   size={'xl'}
                   variant="subtle"
diff --git a/frontend/src/components/shared/tooltip/Tooltip.module.css b/frontend/src/components/shared/tooltip/Tooltip.module.css
index 209f0dcbd..46902c04b 100644
--- a/frontend/src/components/shared/tooltip/Tooltip.module.css
+++ b/frontend/src/components/shared/tooltip/Tooltip.module.css
@@ -10,7 +10,6 @@
   pointer-events: auto;
   z-index: 9999;
   transition: opacity 100ms ease-out, transform 100ms ease-out;
-  min-width: 25rem;
   max-width: 50vh;
   max-height: 80vh;
   color: var(--text-primary);
diff --git a/frontend/src/global.d.ts b/frontend/src/global.d.ts
index 23c8c2bc7..718bc9370 100644
--- a/frontend/src/global.d.ts
+++ b/frontend/src/global.d.ts
@@ -5,3 +5,4 @@ declare module "../components/PageEditor";
 declare module "../components/Viewer";
 declare module "*.js";
 declare module '*.module.css';
+declare module 'pdfjs-dist';
\ No newline at end of file