adding some delay for tooltip (#9339)

tooltips are currently instantaneous. let's add some delay for better
user experience

After investigation, it looks like the open property prevents delays
from happening. Swithcing to hidden property

See https://discord.com/channels/1130383047699738754/1324678408684306486

packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx

@@ -1,3 +1,4 @@
+import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
 import { OverflowingTextWithTooltip } from 'twenty-ui';
 
 type TextDisplayProps = {
@@ -5,10 +6,14 @@ type TextDisplayProps = {
   displayedMaxRows?: number;
 };
 
-export const TextDisplay = ({ text, displayedMaxRows }: TextDisplayProps) => (
+export const TextDisplay = ({ text, displayedMaxRows }: TextDisplayProps) => {
-  <OverflowingTextWithTooltip
+  const { isInlineCellInEditMode } = useInlineCell();
-    text={text}
+  return (
-    displayedMaxRows={displayedMaxRows}
+    <OverflowingTextWithTooltip
-    isTooltipMultiline={true}
+      text={text}
-  />
+      displayedMaxRows={displayedMaxRows}
-);
+      isTooltipMultiline={true}
+      hideTooltip={isInlineCellInEditMode}
+    />
+  );
+};

packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx

@@ -144,7 +144,7 @@ export const ViewFieldsVisibilityDropdownSection = ({
             }-item-tooltip-anchor-${openToolTipIndex}`}
             place="left"
             content={fields[openToolTipIndex].infoTooltipContent}
-            isOpen={true}
+            hidden={false}
           />,
           document.body,
         )}

packages/twenty-ui/src/display/tooltip/AppTooltip.tsx

@@ -1,5 +1,5 @@
-import { PlacesType, PositionStrategy, Tooltip } from 'react-tooltip';
 import styled from '@emotion/styled';
+import { PlacesType, PositionStrategy, Tooltip } from 'react-tooltip';
 
 import { RGBA } from '@ui/theme/constants/Rgba';
 
@@ -44,7 +44,7 @@ export type AppTooltipProps = {
   children?: React.ReactNode;
   offset?: number;
   noArrow?: boolean;
-  isOpen?: boolean;
+  hidden?: boolean;
   place?: PlacesType;
   delay?: TooltipDelay;
   positionStrategy?: PositionStrategy;
@@ -55,7 +55,7 @@ export const AppTooltip = ({
   anchorSelect,
   className,
   content,
-  isOpen,
+  hidden = false,
   noArrow,
   offset,
   delay = TooltipDelay.mediumDelay,
@@ -78,8 +78,8 @@ export const AppTooltip = ({
         className,
         content,
         delayShow: delayInMs,
-        delayHide: delayInMs,
+        delayHide: 20,
-        isOpen,
+        hidden,
         noArrow,
         offset,
         place,

packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx

@@ -76,11 +76,13 @@ export const OverflowingTextWithTooltip = ({
   text,
   isTooltipMultiline,
   displayedMaxRows,
+  hideTooltip,
 }: {
   size?: 'large' | 'small';
   text: string | null | undefined;
   isTooltipMultiline?: boolean;
   displayedMaxRows?: number;
+  hideTooltip?: boolean;
 }) => {
   const textElementId = `title-id-${+new Date()}`;
 
@@ -135,27 +137,26 @@ export const OverflowingTextWithTooltip = ({
           {text}
         </StyledOverflowingText>
       )}
-      {isTitleOverflowing &&
+      {createPortal(
-        createPortal(
+        <div onClick={handleTooltipClick}>
-          <div onClick={handleTooltipClick}>
+          <AppTooltip
-            <AppTooltip
+            anchorSelect={`#${textElementId}`}
-              anchorSelect={`#${textElementId}`}
+            offset={5}
-              offset={5}
+            hidden={!isTitleOverflowing || hideTooltip}
-              isOpen
+            noArrow
-              noArrow
+            place="bottom"
-              place="bottom"
+            positionStrategy="absolute"
-              positionStrategy="absolute"
+            delay={TooltipDelay.mediumDelay}
-              delay={TooltipDelay.mediumDelay}
+          >
-            >
+            {isTooltipMultiline ? (
-              {isTooltipMultiline ? (
+              <Styledpre>{text}</Styledpre>
-                <Styledpre>{text}</Styledpre>
+            ) : (
-              ) : (
+              `${text || ''}`
-                `${text || ''}`
+            )}
-              )}
+          </AppTooltip>
-            </AppTooltip>
+        </div>,
-          </div>,
+        document.body,
-          document.body,
+      )}
-        )}
     </>
   );
 };

packages/twenty-ui/src/display/tooltip/__stories__/Tooltip.stories.tsx

@@ -25,7 +25,7 @@ export const Default: Story = {
     place: TooltipPosition.Bottom,
     delay: TooltipDelay.mediumDelay,
     content: 'Tooltip Test',
-    isOpen: true,
+    hidden: false,
     anchorSelect: '#hover-text',
   },
   decorators: [ComponentDecorator],
@@ -34,7 +34,7 @@ export const Default: Story = {
     className,
     content,
     delay,
-    isOpen,
+    hidden,
     noArrow,
     offset,
     place,
@@ -51,7 +51,7 @@ export const Default: Story = {
           className,
           content,
           delay,
-          isOpen,
+          hidden,
           noArrow,
           offset,
           place,
@@ -68,7 +68,7 @@ export const Hoverable: Story = {
     place: TooltipPosition.Bottom,
     delay: TooltipDelay.mediumDelay,
     content: 'Tooltip Test',
-    isOpen: true,
+    hidden: false,
     anchorSelect: '#hover-text',
   },
   decorators: [ComponentDecorator],
@@ -103,7 +103,7 @@ export const Hoverable: Story = {
 };
 
 export const Catalog: CatalogStory<Story, typeof Tooltip> = {
-  args: { isOpen: true, content: 'Tooltip Test' },
+  args: { hidden: false, content: 'Tooltip Test' },
   play: async ({ canvasElement }) => {
     Object.values(TooltipPosition).forEach((position) => {
       const element = canvasElement.querySelector(