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

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,
       }}
     />
   );

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,7 +140,9 @@ export const OverflowingTextWithTooltip = ({
           {text}
         </StyledOverflowingText>
       )}
-      {createPortal(
+      {shouldRenderTooltip &&
+        isTitleOverflowing &&
+        createPortal(
           <div onClick={handleTooltipClick}>
             <AppTooltip
               anchorSelect={`#${textElementId}`}
@@ -147,6 +152,7 @@ export const OverflowingTextWithTooltip = ({
               place="bottom"
               positionStrategy="absolute"
               delay={TooltipDelay.mediumDelay}
+              isOpen={true}
             >
               {isTooltipMultiline ? (
                 <Styledpre>{text}</Styledpre>