From fd65963a9fa536c96e2e26e1685eca26a150c08d Mon Sep 17 00:00:00 2001
From: Alice Dahan <lilice.dhn@gmail.com>
Date: Fri, 15 Nov 2024 16:58:14 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20enl=C3=A8ve=20la=20fl=C3=A8che=20sur=20?=
 =?UTF-8?q?les=20tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/source/design-system/tooltip/Tooltip.tsx | 20 +------------------
 .../RéductionGénéraleMoisParMois.tsx          |  7 ++-----
 2 files changed, 3 insertions(+), 24 deletions(-)

diff --git a/site/source/design-system/tooltip/Tooltip.tsx b/site/source/design-system/tooltip/Tooltip.tsx
index 966917ed5..7b86e0b6b 100644
--- a/site/source/design-system/tooltip/Tooltip.tsx
+++ b/site/source/design-system/tooltip/Tooltip.tsx
@@ -15,13 +15,11 @@ 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)
@@ -74,7 +72,6 @@ export const Tooltip = ({
 						left: x ?? 0,
 						width: 'max-content',
 					}}
-					$hasArrow={hasArrow}
 				>
 					{tooltip}
 				</StyledTooltip>
@@ -83,7 +80,7 @@ export const Tooltip = ({
 	)
 }
 
-const StyledTooltip = styled.span<{ $hasArrow: boolean }>`
+const StyledTooltip = styled.span`
 	max-width: 20rem;
 
 	opacity: 1 !important;
@@ -101,21 +98,6 @@ const StyledTooltip = styled.span<{ $hasArrow: boolean }>`
 	* {
 		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`
diff --git a/site/source/pages/simulateurs/reduction-generale/RéductionGénéraleMoisParMois.tsx b/site/source/pages/simulateurs/reduction-generale/RéductionGénéraleMoisParMois.tsx
index 63a6a644f..37f24c196 100644
--- a/site/source/pages/simulateurs/reduction-generale/RéductionGénéraleMoisParMois.tsx
+++ b/site/source/pages/simulateurs/reduction-generale/RéductionGénéraleMoisParMois.tsx
@@ -139,7 +139,7 @@ export default function RéductionGénéraleMoisParMois({
 										)}-${monthName}`}
 									>
 										{data[monthIndex].réductionGénérale ? (
-											<Tooltip tooltip={tooltip} hasArrow={true}>
+											<Tooltip tooltip={tooltip}>
 												<StyledDiv>
 													{formatValue(
 														{
@@ -164,10 +164,7 @@ export default function RéductionGénéraleMoisParMois({
 															data[monthIndex].rémunérationBrute,
 													}}
 												>
-													<Tooltip
-														tooltip={<WarningSalaireTrans />}
-														hasArrow={true}
-													>
+													<Tooltip tooltip={<WarningSalaireTrans />}>
 														<span className="sr-only">{t('Attention')}</span>
 														<StyledWarningIcon aria-label={t('Attention')} />
 													</Tooltip>