diff --git a/site/source/design-system/tooltip/Tooltip.tsx b/site/source/design-system/tooltip/Tooltip.tsx index 7b86e0b6b..966917ed5 100644 --- a/site/source/design-system/tooltip/Tooltip.tsx +++ b/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} @@ -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` 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 1bb1b8b7b..346c02a18 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 @@ -124,7 +124,7 @@ export default function RéductionGénéraleMoisParMois({ {data[monthIndex].réductionGénérale ? ( - + {formatValue( { nodeValue: data[monthIndex].réductionGénérale },