Fix tooltip performances (#9930)

Rendering the Tooltip is creating performance issues on the whole app. In this PR we only render the tooltip on hover
twentyhq · Jan 30, 2025 · ae4bf8d · ae4bf8d
1 parent a039987
commit ae4bf8d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 20 deletions.
diff --git a/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx b/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx
@@ -50,6 +50,7 @@ export type AppTooltipProps = {
   positionStrategy?: PositionStrategy;
   clickable?: boolean;
   width?: string;
+  isOpen?: boolean;
 };
 
 export const AppTooltip = ({
@@ -65,6 +66,7 @@ export const AppTooltip = ({
   children,
   clickable,
   width,
+  isOpen,
 }: AppTooltipProps) => {
   const delayInMs =
     delay === TooltipDelay.noDelay
@@ -89,6 +91,7 @@ export const AppTooltip = ({
         children,
         clickable,
         width,
+        isOpen,
       }}
     />
   );

diff --git a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx
@@ -89,6 +89,7 @@ export const OverflowingTextWithTooltip = ({
   const textRef = useRef<HTMLDivElement>(null);
 
   const [isTitleOverflowing, setIsTitleOverflowing] = useState(false);
+  const [shouldRenderTooltip, setShouldRenderTooltip] = useState(false);
 
   const handleMouseEnter = () => {
     const isOverflowing =
@@ -98,10 +99,12 @@ export const OverflowingTextWithTooltip = ({
         : false;
 
     setIsTitleOverflowing(isOverflowing);
+    setShouldRenderTooltip(true);
   };
 
   const handleMouseLeave = () => {
     setIsTitleOverflowing(false);
+    setShouldRenderTooltip(false);
   };
 
   const handleTooltipClick = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -137,26 +140,29 @@ export const OverflowingTextWithTooltip = ({
           {text}
         </StyledOverflowingText>
       )}
-      {createPortal(
-        <div onClick={handleTooltipClick}>
-          <AppTooltip
-            anchorSelect={`#${textElementId}`}
-            offset={5}
-            hidden={!isTitleOverflowing || hideTooltip}
-            noArrow
-            place="bottom"
-            positionStrategy="absolute"
-            delay={TooltipDelay.mediumDelay}
-          >
-            {isTooltipMultiline ? (
-              <Styledpre>{text}</Styledpre>
-            ) : (
-              `${text || ''}`
-            )}
-          </AppTooltip>
-        </div>,
-        document.body,
-      )}
+      {shouldRenderTooltip &&
+        isTitleOverflowing &&
+        createPortal(
+          <div onClick={handleTooltipClick}>
+            <AppTooltip
+              anchorSelect={`#${textElementId}`}
+              offset={5}
+              hidden={!isTitleOverflowing || hideTooltip}
+              noArrow
+              place="bottom"
+              positionStrategy="absolute"
+              delay={TooltipDelay.mediumDelay}
+              isOpen={true}
+            >
+              {isTooltipMultiline ? (
+                <Styledpre>{text}</Styledpre>
+              ) : (
+                `${text || ''}`
+              )}
+            </AppTooltip>
+          </div>,
+          document.body,
+        )}
     </>
   );
 };