✨ tooltip

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} />;
+}

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