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
twentyhq · Jan 3, 2025 · a0fe94d · a0fe94d
1 parent 5bd2154
commit a0fe94d
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 39 deletions.
diff --git a/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx
@@ -1,14 +1,19 @@
+import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
 import { OverflowingTextWithTooltip } from 'twenty-ui';
 
 type TextDisplayProps = {
   text: string;
   displayedMaxRows?: number;
 };
 
-export const TextDisplay = ({ text, displayedMaxRows }: TextDisplayProps) => (
-  <OverflowingTextWithTooltip
-    text={text}
-    displayedMaxRows={displayedMaxRows}
-    isTooltipMultiline={true}
-  />
-);
+export const TextDisplay = ({ text, displayedMaxRows }: TextDisplayProps) => {
+  const { isInlineCellInEditMode } = useInlineCell();
+  return (
+    <OverflowingTextWithTooltip
+      text={text}
+      displayedMaxRows={displayedMaxRows}
+      isTooltipMultiline={true}
+      hideTooltip={isInlineCellInEditMode}
+    />
+  );
+};
diff --git a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx b/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,
         )}

diff --git a/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx b/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,

diff --git a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx b/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(
-          <div onClick={handleTooltipClick}>
-            <AppTooltip
-              anchorSelect={`#${textElementId}`}
-              offset={5}
-              isOpen
-              noArrow
-              place="bottom"
-              positionStrategy="absolute"
-              delay={TooltipDelay.mediumDelay}
-            >
-              {isTooltipMultiline ? (
-                <Styledpre>{text}</Styledpre>
-              ) : (
-                `${text || ''}`
-              )}
-            </AppTooltip>
-          </div>,
-          document.body,
-        )}
+      {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,
+      )}
     </>
   );
 };
diff --git a/packages/twenty-ui/src/display/tooltip/__stories__/Tooltip.stories.tsx b/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(