diff --git a/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx b/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx index e6377957f..39e0ea251 100644 --- a/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx +++ b/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx @@ -50,6 +50,7 @@ export type AppTooltipProps = { positionStrategy?: PositionStrategy; clickable?: boolean; width?: string; + isOpen?: boolean; }; export const AppTooltip = ({ @@ -65,6 +66,7 @@ export const AppTooltip = ({ children, clickable, width, + isOpen, }: AppTooltipProps) => { const delayInMs = delay === TooltipDelay.noDelay @@ -89,6 +91,7 @@ export const AppTooltip = ({ children, clickable, width, + isOpen, }} /> ); diff --git a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx index 2d0f42899..18977b9a0 100644 --- a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx +++ b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx @@ -89,6 +89,7 @@ export const OverflowingTextWithTooltip = ({ const textRef = useRef(null); const [isTitleOverflowing, setIsTitleOverflowing] = useState(false); + const [shouldRenderTooltip, setShouldRenderTooltip] = useState(false); const handleMouseEnter = () => { const isOverflowing = @@ -98,10 +99,12 @@ export const OverflowingTextWithTooltip = ({ : false; setIsTitleOverflowing(isOverflowing); + setShouldRenderTooltip(true); }; const handleMouseLeave = () => { setIsTitleOverflowing(false); + setShouldRenderTooltip(false); }; const handleTooltipClick = (event: React.MouseEvent) => { @@ -137,26 +140,29 @@ export const OverflowingTextWithTooltip = ({ {text} )} - {createPortal( -
- -
, - document.body, - )} + {shouldRenderTooltip && + isTitleOverflowing && + createPortal( +
+ +
, + document.body, + )} ); };