Add currency hover tooltip in CurrencyDisplay (#18045)

https://github.com/user-attachments/assets/af768ecb-b5e9-4e8d-a9f9-fee1a08ea9a0

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

packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx

@@ -1,4 +1,7 @@
 import { useTheme } from '@emotion/react';
+import { useId, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
 
 import { useNumberFormat } from '@/localization/hooks/useNumberFormat';
 import { type FieldDefinition } from '@/object-record/record-field/ui/types/FieldDefinition';
@@ -22,10 +25,14 @@ export const CurrencyDisplay = ({
   fieldDefinition,
 }: CurrencyDisplayProps) => {
   const theme = useTheme();
+  const instanceId = useId();
+  const [shouldRenderTooltip, setShouldRenderTooltip] = useState(false);
 
-  const CurrencyIcon = isDefined(currencyValue?.currencyCode)
-    ? SETTINGS_FIELD_CURRENCY_CODES[currencyValue?.currencyCode]?.Icon
+  const currencyCode = currencyValue?.currencyCode;
+  const currencyMetadata = isDefined(currencyCode)
+    ? SETTINGS_FIELD_CURRENCY_CODES[currencyCode]
     : null;
+  const CurrencyIcon = currencyMetadata?.Icon ?? null;
 
   const amountToDisplay = isUndefinedOrNull(currencyValue?.amountMicros)
     ? null
@@ -36,23 +43,51 @@ export const CurrencyDisplay = ({
   const decimalsToUse = decimals ?? DEFAULT_DECIMAL_VALUE;
 
   const { formatNumber } = useNumberFormat();
+  const tooltipAnchorId = `currency-icon-${instanceId.replace(/[^a-zA-Z0-9-_]/g, '-')}`;
+  const currencyTooltipContent = isDefined(currencyCode)
+    ? `${currencyCode}${currencyMetadata?.label ? ` - ${currencyMetadata.label}` : ''}`
+    : undefined;
+  const shouldShowCurrencyTooltip =
+    isDefined(CurrencyIcon) &&
+    amountToDisplay !== null &&
+    isDefined(currencyTooltipContent);
 
   return (
-    <EllipsisDisplay>
-      {isDefined(CurrencyIcon) && amountToDisplay !== null && (
-        <>
-          <CurrencyIcon
-            color={theme.font.color.primary}
-            size={theme.icon.size.md}
-            stroke={theme.icon.stroke.sm}
-          />{' '}
-        </>
-      )}
-      {amountToDisplay !== null
-        ? !isDefined(format) || format === 'short'
-          ? formatToShortNumber(amountToDisplay)
-          : formatNumber(amountToDisplay, { decimals: decimalsToUse })
-        : null}
-    </EllipsisDisplay>
+    <>
+      <EllipsisDisplay>
+        {shouldShowCurrencyTooltip && (
+          <>
+            <span
+              id={tooltipAnchorId}
+              onMouseEnter={() => setShouldRenderTooltip(true)}
+              onMouseLeave={() => setShouldRenderTooltip(false)}
+            >
+              <CurrencyIcon
+                color={theme.font.color.primary}
+                size={theme.icon.size.md}
+                stroke={theme.icon.stroke.sm}
+              />
+            </span>{' '}
+          </>
+        )}
+        {amountToDisplay !== null
+          ? !isDefined(format) || format === 'short'
+            ? formatToShortNumber(amountToDisplay)
+            : formatNumber(amountToDisplay, { decimals: decimalsToUse })
+          : null}
+      </EllipsisDisplay>
+      {shouldRenderTooltip &&
+        shouldShowCurrencyTooltip &&
+        createPortal(
+          <AppTooltip
+            anchorSelect={`#${tooltipAnchorId}`}
+            content={currencyTooltipContent}
+            delay={TooltipDelay.shortDelay}
+            place={TooltipPosition.Top}
+            positionStrategy="fixed"
+          />,
+          document.body,
+        )}
+    </>
   );
 };