diff --git a/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx
index 8a24acab92..c95f31fad2 100644
--- a/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx
+++ b/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 (
-
- {isDefined(CurrencyIcon) && amountToDisplay !== null && (
- <>
- {' '}
- >
- )}
- {amountToDisplay !== null
- ? !isDefined(format) || format === 'short'
- ? formatToShortNumber(amountToDisplay)
- : formatNumber(amountToDisplay, { decimals: decimalsToUse })
- : null}
-
+ <>
+
+ {shouldShowCurrencyTooltip && (
+ <>
+ setShouldRenderTooltip(true)}
+ onMouseLeave={() => setShouldRenderTooltip(false)}
+ >
+
+ {' '}
+ >
+ )}
+ {amountToDisplay !== null
+ ? !isDefined(format) || format === 'short'
+ ? formatToShortNumber(amountToDisplay)
+ : formatNumber(amountToDisplay, { decimals: decimalsToUse })
+ : null}
+
+ {shouldRenderTooltip &&
+ shouldShowCurrencyTooltip &&
+ createPortal(
+ ,
+ document.body,
+ )}
+ >
);
};