From 7832cb2f5c1864e42c966ad7a06bab66a493f909 Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Mon, 26 Aug 2024 17:00:25 +0200
Subject: [PATCH] :sparkles: tooltip

---
 .../DesignSystem/TooltipElement/index.tsx     | 27 +++++++++++++++++++
 .../Components/Layouts/DesignSystem/index.tsx | 13 +++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 src/front/Components/DesignSystem/TooltipElement/index.tsx

diff --git a/src/front/Components/DesignSystem/TooltipElement/index.tsx b/src/front/Components/DesignSystem/TooltipElement/index.tsx
new file mode 100644
index 00000000..a7f31d77
--- /dev/null
+++ b/src/front/Components/DesignSystem/TooltipElement/index.tsx
@@ -0,0 +1,27 @@
+import { styled, Tooltip, tooltipClasses, TooltipProps } from "@mui/material";
+
+import Typography, { ETypo, ETypoColor } from "../Typography";
+
+type IProps = TooltipProps;
+
+export default function TooltipElement(props: IProps) {
+	const CustomTooltip = styled(({ className, ...props }: TooltipProps) => (
+		<Tooltip
+			{...props}
+			title={
+				<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
+					{props.title}
+				</Typography>
+			}
+			classes={{ popper: className }}
+		/>
+	))(({ theme }) => ({
+		[`& .${tooltipClasses.tooltip}`]: {
+			backgroundColor: "var(--tooltip-background, #FFF)",
+			boxShadow: theme.shadows[1],
+			borderRadius: "var(--tooltip-radius, 4px)",
+		},
+	}));
+
+	return <CustomTooltip {...props} />;
+}
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index ea214504..cfc0629a 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -32,6 +32,7 @@ import {
 	ArrowLongRightIcon,
 	EllipsisHorizontalIcon,
 	PencilSquareIcon,
+	QuestionMarkCircleIcon,
 	UsersIcon,
 	XMarkIcon,
 } from "@heroicons/react/24/outline";
@@ -39,6 +40,7 @@ import { useCallback, useMemo, useState } from "react";
 
 import classes from "./classes.module.scss";
 import { ToasterService } from "@Front/Components/DesignSystem/Toaster";
+import TooltipElement from "@Front/Components/DesignSystem/TooltipElement";
 
 export default function DesignSystem() {
 	const { isOpen, open, close } = useOpenable();
@@ -90,6 +92,17 @@ export default function DesignSystem() {
 			<div className={classes["root"]}>
 				<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
 				<div className={classes["components"]}>
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Tooltip</Typography>
+					<div className={classes["rows"]}>
+						<TooltipElement title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec">
+							<QuestionMarkCircleIcon width={24} />
+						</TooltipElement>
+						<TooltipElement title="Lorem ipsum dolor">
+							<span style={{ cursor: "help" }}>
+								<Typography typo={ETypo.TEXT_XS_LIGHT}>Work for any children</Typography>
+							</span>
+						</TooltipElement>
+					</div>
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Toast</Typography>
 					<div className={classes["rows"]}>
 						<Button