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) => {
+  const { isInlineCellInEditMode } = useInlineCell();
+  return (
     <OverflowingTextWithTooltip
       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,
-        isOpen,
+        delayHide: 20,
+        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,13 +137,12 @@ export const OverflowingTextWithTooltip = ({
           {text}
         </StyledOverflowingText>
       )}
-      {isTitleOverflowing &&
-        createPortal(
+      {createPortal(
         <div onClick={handleTooltipClick}>
           <AppTooltip
             anchorSelect={`#${textElementId}`}
             offset={5}
-              isOpen
+            hidden={!isTitleOverflowing || hideTooltip}
             noArrow
             place="bottom"
             positionStrategy="absolute"

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(