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
index 019d1285f..b60f808fa 100644
--- 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,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 (
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx
index 0c5f63a04..90d1375df 100644
--- 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
index e0a00d275..96db35121 100644
--- 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
index 386bfda15..2d0f42899 100644
--- 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}
)}
- {isTitleOverflowing &&
- createPortal(
-
-
- {isTooltipMultiline ? (
- {text}
- ) : (
- `${text || ''}`
- )}
-
-
,
- document.body,
- )}
+ {createPortal(
+
+
+ {isTooltipMultiline ? (
+ {text}
+ ) : (
+ `${text || ''}`
+ )}
+
+
,
+ 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
index 3b46a1fc0..1341cdbb6 100644
--- 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 = {
- args: { isOpen: true, content: 'Tooltip Test' },
+ args: { hidden: false, content: 'Tooltip Test' },
play: async ({ canvasElement }) => {
Object.values(TooltipPosition).forEach((position) => {
const element = canvasElement.querySelector(