From 316fc44aeba2548615445c47bc1aea76d834b6b7 Mon Sep 17 00:00:00 2001
From: MuhammadKhalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Thu, 9 May 2024 11:28:58 +0330
Subject: [PATCH 1/2] reviewing popup modals

---
 Client/src/App.jsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index 3e3a46702..519f2fc59 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -1,11 +1,7 @@
-import PlayGroundPopupModals from "./screens/PlayGround/PlayGround-Popup-Modals";
-
 function App() {
   return (
     <>
-      <div>
-        <PlayGroundPopupModals />
-      </div>
+      <div></div>
     </>
   );
 }

From 188768c259969ab7ede18e2a9a5f6e52a56458b0 Mon Sep 17 00:00:00 2001
From: MuhammadKhalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Thu, 9 May 2024 13:37:11 +0330
Subject: [PATCH 2/2] tooltips are created

---
 Client/src/App.jsx                            |  6 ++-
 .../TooltipWithTail/TooltipWithTail.tsx       | 46 +++++++++++++++++++
 .../TooltipWithTail/tooltipWithTail.css       | 21 +++++++++
 .../PlayGround/PlayGround-Tooltips.jsx        | 34 ++++++++++++++
 Client/src/screens/PlayGround/playGround.css  |  7 +++
 5 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 Client/src/components/Tooltips/TooltipWithTail/TooltipWithTail.tsx
 create mode 100644 Client/src/components/Tooltips/TooltipWithTail/tooltipWithTail.css
 create mode 100644 Client/src/screens/PlayGround/PlayGround-Tooltips.jsx

diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index 519f2fc59..983a205cd 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -1,7 +1,11 @@
+import PlayGroundTooltips from "./screens/PlayGround/PlayGround-Tooltips";
+
 function App() {
   return (
     <>
-      <div></div>
+      <div>
+        <PlayGroundTooltips />
+      </div>
     </>
   );
 }
diff --git a/Client/src/components/Tooltips/TooltipWithTail/TooltipWithTail.tsx b/Client/src/components/Tooltips/TooltipWithTail/TooltipWithTail.tsx
new file mode 100644
index 000000000..9626c0f6e
--- /dev/null
+++ b/Client/src/components/Tooltips/TooltipWithTail/TooltipWithTail.tsx
@@ -0,0 +1,46 @@
+import "./tooltipWithTail.css";
+import React from "react";
+import { styled } from "@mui/material/styles";
+import Button from "@mui/material/Button";
+import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+
+const CustomizedTooltip = styled(
+  ({ className, placement, arrow, ...props }: TooltipProps) => (
+    <Tooltip
+      {...props}
+      placement={placement}
+      arrow={arrow}
+      classes={{ popper: className }}
+    />
+  )
+)(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: "black",
+  },
+  [`& .${tooltipClasses.arrow}`]: {
+    color: "black",
+  },
+}));
+
+function TooltipWithTail({ placement, arrow = false, title, text }) {
+  return (
+    <div>
+      <CustomizedTooltip
+        arrow={arrow}
+        placement={placement}
+        title={
+          <React.Fragment>
+            {title && <div className="tooltip-title">{title}</div>}
+            <div className="tooltip-description">{text}</div>
+          </React.Fragment>
+        }
+        className="tooltip-holder"
+      >
+        <HelpOutlineIcon style={{ fill: "#98A2B3" }} />
+      </CustomizedTooltip>
+    </div>
+  );
+}
+
+export default TooltipWithTail;
diff --git a/Client/src/components/Tooltips/TooltipWithTail/tooltipWithTail.css b/Client/src/components/Tooltips/TooltipWithTail/tooltipWithTail.css
new file mode 100644
index 000000000..f2188a5fb
--- /dev/null
+++ b/Client/src/components/Tooltips/TooltipWithTail/tooltipWithTail.css
@@ -0,0 +1,21 @@
+:root {
+  --tooltip-color-0: #d0d5dd;
+  --tooltip-margin: 5px;
+  --tooltip-font-size: 12px;
+}
+
+.tooltip-title {
+  font-size: var(--tooltip-font-size);
+  font-weight: bold;
+  margin: var(--tooltip-margin);
+}
+
+.tooltip-description {
+  font-size: var(--tooltip-font-size);
+  color: var(--tooltip-color-0);
+  margin: var(--tooltip-margin);
+}
+
+/* box-shadow: 
+  0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+  0px 4px 6px -2px rgba(16, 24, 40, 0.03); */
diff --git a/Client/src/screens/PlayGround/PlayGround-Tooltips.jsx b/Client/src/screens/PlayGround/PlayGround-Tooltips.jsx
new file mode 100644
index 000000000..d5de8a29e
--- /dev/null
+++ b/Client/src/screens/PlayGround/PlayGround-Tooltips.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import TooltipWithTail from "../../components/Tooltips/TooltipWithTail/TooltipWithTail";
+import "./playGround.css";
+
+function PlayGroundTooltips() {
+  return (
+    <div className="tooltip-playground">
+      <br />
+      <TooltipWithTail
+        placement="left"
+        arrow={true}
+        title="This is a tooltip"
+        text="This is a tooltip"
+      />
+      <br />
+      <TooltipWithTail placement="top" arrow={true} text="This is a tooltip" />
+      <br />
+      <TooltipWithTail
+        placement="bottom"
+        arrow={false}
+        text="This is a tooltip"
+      />
+      <br />
+      <TooltipWithTail
+        placement="right"
+        arrow={true}
+        title="This is a tooltip"
+        text="Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text."
+      />
+    </div>
+  );
+}
+
+export default PlayGroundTooltips;
diff --git a/Client/src/screens/PlayGround/playGround.css b/Client/src/screens/PlayGround/playGround.css
index c5b86268c..b521af537 100644
--- a/Client/src/screens/PlayGround/playGround.css
+++ b/Client/src/screens/PlayGround/playGround.css
@@ -5,3 +5,10 @@
 .play-ground-charts-spacing {
   height: 110px;
 }
+
+.tooltip-playground {
+  margin: auto;
+  width: 100%;
+  justify-content: center;
+  text-align: center;
+}