feat: ajoute une flèche à Tooltip

site/source/design-system/tooltip/Tooltip.tsx

@@ -15,11 +15,13 @@ export const Tooltip = ({
 	tooltip,
 	className,
 	style,
+	hasArrow = false,
 }: {
 	children: ReactNode
 	tooltip: ReactNode
 	className?: string
 	style?: CSSProperties
+	hasArrow?: boolean
 }) => {
 	const [isHovered, setIsHovered] = useState(false)
 	const [isFocused, setIsFocused] = useState(false)
@@ -72,6 +74,7 @@ export const Tooltip = ({
 						left: x ?? 0,
 						width: 'max-content',
 					}}
+					$hasArrow={hasArrow}
 				>
 					{tooltip}
 				</StyledTooltip>
@@ -80,7 +83,7 @@ export const Tooltip = ({
 	)
 }
 
-const StyledTooltip = styled.span`
+const StyledTooltip = styled.span<{ $hasArrow: boolean }>`
 	max-width: 20rem;
 
 	opacity: 1 !important;
@@ -98,6 +101,21 @@ const StyledTooltip = styled.span`
 	* {
 		color: ${({ theme }) => theme.colors.extended.grey[100]};
 	}
+	/* Flèche (https://coderpad.io/blog/development/react-tooltip-a-how-to-guide/) : */
+	&::after {
+		${({ $hasArrow, theme }) =>
+			$hasArrow &&
+			`
+			content: " ";
+			position: absolute;
+			top: 100%;
+			left: 50%;
+			margin-left: -${theme.spacings.xs};
+			border-width: ${theme.spacings.xs};
+			border-style: solid;
+			border-color: ${theme.colors.extended.grey[800]} transparent transparent transparent;
+		`}
+	}
 `
 
 const StyledButtonAsText = styled.button`

site/source/pages/simulateurs/reduction-generale/RéductionGénéraleMoisParMois.tsx

@@ -124,7 +124,7 @@ export default function RéductionGénéraleMoisParMois({
 									</td>
 									<td>
 										{data[monthIndex].réductionGénérale ? (
-											<Tooltip tooltip={tooltip}>
+											<Tooltip tooltip={tooltip} hasArrow={true}>
 												<StyledDiv>
 													{formatValue(
 														{ nodeValue: data[monthIndex].réductionGénérale },