Merge pull request #5 from MuhammadKhalilzadeh/tooltips

Tooltips

Client/src/App.jsx

@@ -1,10 +1,10 @@
-import PlayGroundPopupModals from "./screens/PlayGround/PlayGround-Popup-Modals";
+import PlayGroundTooltips from "./screens/PlayGround/PlayGround-Tooltips";
 
 function App() {
   return (
     <>
       <div>
-        <PlayGroundPopupModals />
+        <PlayGroundTooltips />
       </div>
     </>
   );

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;

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); */

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;

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