Feat : Introduced Delay Options for Tooltip (#5766)

Fixes https://github.com/twentyhq/twenty/issues/5727

---------

Co-authored-by: Rushikesh Tarapure <rushikeshtarapure@gofynd.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

@@ -10,6 +10,12 @@ export enum TooltipPosition {
   Bottom = 'bottom',
 }
 
+export enum TooltipDelay {
+  noDelay = '0ms',
+  shortDelay = '300ms',
+  mediumDelay = '500ms',
+}
+
 const StyledAppTooltip = styled(Tooltip)`
   backdrop-filter: ${({ theme }) => theme.blur.strong};
   background-color: ${({ theme }) => RGBA(theme.color.gray80, 0.8)};
@@ -36,38 +42,51 @@ export type AppTooltipProps = {
   anchorSelect?: string;
   content?: string;
   children?: React.ReactNode;
-  delayHide?: number;
   offset?: number;
   noArrow?: boolean;
   isOpen?: boolean;
   place?: PlacesType;
+  delay?: TooltipDelay;
   positionStrategy?: PositionStrategy;
+  clickable?: boolean;
 };
 
 export const AppTooltip = ({
   anchorSelect,
   className,
   content,
-  delayHide,
   isOpen,
   noArrow,
   offset,
+  delay = TooltipDelay.mediumDelay,
   place,
   positionStrategy,
   children,
-}: AppTooltipProps) => (
-  <StyledAppTooltip
-    {...{
-      anchorSelect,
-      className,
-      content,
-      delayHide,
-      isOpen,
-      noArrow,
-      offset,
-      place,
-      positionStrategy,
-      children,
-    }}
-  />
-);
+  clickable,
+}: AppTooltipProps) => {
+  const delayInMs =
+    delay === TooltipDelay.noDelay
+      ? 0
+      : delay === TooltipDelay.shortDelay
+        ? 300
+        : 500;
+
+  return (
+    <StyledAppTooltip
+      {...{
+        anchorSelect,
+        className,
+        content,
+        delayShow: delayInMs,
+        delayHide: delayInMs,
+        isOpen,
+        noArrow,
+        offset,
+        place,
+        positionStrategy,
+        children,
+        clickable,
+      }}
+    />
+  );
+};

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

@@ -4,7 +4,7 @@ import { styled } from '@linaria/react';
 
 import { THEME_COMMON } from '@ui/theme';
 
-import { AppTooltip } from './AppTooltip';
+import { AppTooltip, TooltipDelay } from './AppTooltip';
 
 const spacing4 = THEME_COMMON.spacing(4);
 
@@ -87,12 +87,12 @@ export const OverflowingTextWithTooltip = ({
             <AppTooltip
               anchorSelect={`#${textElementId}`}
               content={mutliline ? undefined : text ?? ''}
-              delayHide={1}
               offset={5}
               isOpen
               noArrow
               place="bottom"
               positionStrategy="absolute"
+              delay={TooltipDelay.mediumDelay}
             >
               {mutliline ? <pre>{text}</pre> : ''}
             </AppTooltip>

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

@@ -6,7 +6,11 @@ import {
   ComponentDecorator,
 } from '@ui/testing';
 
-import { AppTooltip as Tooltip, TooltipPosition } from '../AppTooltip';
+import {
+  AppTooltip as Tooltip,
+  TooltipDelay,
+  TooltipPosition,
+} from '../AppTooltip';
 
 const meta: Meta<typeof Tooltip> = {
   title: 'UI/Display/Tooltip',
@@ -19,6 +23,7 @@ type Story = StoryObj<typeof Tooltip>;
 export const Default: Story = {
   args: {
     place: TooltipPosition.Bottom,
+    delay: TooltipDelay.mediumDelay,
     content: 'Tooltip Test',
     isOpen: true,
     anchorSelect: '#hover-text',
@@ -28,12 +33,54 @@ export const Default: Story = {
     anchorSelect,
     className,
     content,
-    delayHide,
+    delay,
     isOpen,
     noArrow,
     offset,
     place,
     positionStrategy,
+    clickable,
+  }) => (
+    <>
+      <p id="hover-text" data-testid="tooltip">
+        Hover me!
+      </p>
+      <Tooltip
+        {...{
+          anchorSelect,
+          className,
+          content,
+          delay,
+          isOpen,
+          noArrow,
+          offset,
+          place,
+          positionStrategy,
+          clickable,
+        }}
+      />
+    </>
+  ),
+};
+
+export const Hoverable: Story = {
+  args: {
+    place: TooltipPosition.Bottom,
+    delay: TooltipDelay.mediumDelay,
+    content: 'Tooltip Test',
+    isOpen: true,
+    anchorSelect: '#hover-text',
+  },
+  decorators: [ComponentDecorator],
+  render: ({
+    anchorSelect,
+    className,
+    content,
+    delay,
+    noArrow,
+    offset,
+    place,
+    positionStrategy,
   }) => (
     <>
       <p id="hover-text" data-testid="tooltip">
@@ -44,8 +91,7 @@ export const Default: Story = {
           anchorSelect,
           className,
           content,
-          delayHide,
-          isOpen,
+          delay,
           noArrow,
           offset,
           place,