From acbd60dedf5a9291059f607dbbe948c83902ede2 Mon Sep 17 00:00:00 2001
From: Marcos Hernandez <marcosh@berkeley.com>
Date: Wed, 19 Apr 2023 21:01:34 -0700
Subject: [PATCH 1/2] still working on tooltip

---
 .../ManagerInformationTabContent.tsx          |  9 +++-
 .../DetailedToolTipBtn/DetailedToolTipBtn.tsx | 47 +++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/sprintFiles/DetailedToolTipBtn/DetailedToolTipBtn.tsx

diff --git a/src/components/manager/membersPage/informationTab/ManagerInformationTabContent.tsx b/src/components/manager/membersPage/informationTab/ManagerInformationTabContent.tsx
index b8248c8..1236f0e 100644
--- a/src/components/manager/membersPage/informationTab/ManagerInformationTabContent.tsx
+++ b/src/components/manager/membersPage/informationTab/ManagerInformationTabContent.tsx
@@ -1,4 +1,11 @@
+import { DetailedToolTipBtn } from '@/sprintFiles/DetailedToolTipBtn/DetailedToolTipBtn'
+
 const ManagerInformationTabContent = () => {
-  return <div>ManagerInformationTabContent</div>
+  return (
+    <div>
+      ManagerInformationTabContent
+      <DetailedToolTipBtn messagePopUp='testing' placement='right'/>
+    </div>
+  )
 }
 export default ManagerInformationTabContent
diff --git a/src/sprintFiles/DetailedToolTipBtn/DetailedToolTipBtn.tsx b/src/sprintFiles/DetailedToolTipBtn/DetailedToolTipBtn.tsx
new file mode 100644
index 0000000..e799e26
--- /dev/null
+++ b/src/sprintFiles/DetailedToolTipBtn/DetailedToolTipBtn.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Tooltip from '@mui/material/Tooltip';
+import { Button, ClickAwayListener, IconButton } from '@mui/material';
+import { TooltipProps } from '@mui/material/Tooltip';
+import Icon from '@/assets/Icon';
+
+type DetailedToolTipBtnProps = {
+    messagePopUp: string
+    placement?: TooltipProps["placement"]
+  }
+  
+  export const DetailedToolTipBtn: React.FC<DetailedToolTipBtnProps> = ({
+    messagePopUp,
+    placement,
+  }: DetailedToolTipBtnProps) => {
+    const [open, setOpen] = React.useState(false);
+
+    const handleTooltipClose = () => {
+      setOpen(false);
+    };
+  
+    const handleTooltipOpen = () => {
+      setOpen(true);
+    };
+
+    return (
+        <ClickAwayListener onClickAway={handleTooltipClose}>
+            <div>
+              <Tooltip
+                PopperProps={{
+                  disablePortal: true,
+                }}
+                onClose={handleTooltipClose}
+                open={open}
+                disableFocusListener
+                disableHoverListener
+                disableTouchListener
+                title={messagePopUp}
+                placement={placement}
+                arrow
+              >
+                <IconButton onClick={handleTooltipOpen}>Hello</IconButton>
+              </Tooltip>
+            </div>
+          </ClickAwayListener>
+    )
+  }
\ No newline at end of file

From 86bc6855509661030836e23e493293fa83a5ce64 Mon Sep 17 00:00:00 2001
From: Marcos Hernandez <marcosh@berkeley.com>
Date: Sun, 23 Apr 2023 20:18:07 -0700
Subject: [PATCH 2/2] Created tooltip info button

---
 .../ManagerInformationTabContent.tsx          |   2 +-
 .../DetailedToolTipBtn/DetailedToolTipBtn.tsx | 122 ++++++++++++------
 2 files changed, 81 insertions(+), 43 deletions(-)

diff --git a/src/components/manager/membersPage/informationTab/ManagerInformationTabContent.tsx b/src/components/manager/membersPage/informationTab/ManagerInformationTabContent.tsx
index 1236f0e..cd581bb 100644
--- a/src/components/manager/membersPage/informationTab/ManagerInformationTabContent.tsx
+++ b/src/components/manager/membersPage/informationTab/ManagerInformationTabContent.tsx
@@ -4,7 +4,7 @@ const ManagerInformationTabContent = () => {
   return (
     <div>
       ManagerInformationTabContent
-      <DetailedToolTipBtn messagePopUp='testing' placement='right'/>
+      <DetailedToolTipBtn messagePopUp='Enter a custom message here!!!' placement='right'/>
     </div>
   )
 }
diff --git a/src/sprintFiles/DetailedToolTipBtn/DetailedToolTipBtn.tsx b/src/sprintFiles/DetailedToolTipBtn/DetailedToolTipBtn.tsx
index e799e26..c3092c3 100644
--- a/src/sprintFiles/DetailedToolTipBtn/DetailedToolTipBtn.tsx
+++ b/src/sprintFiles/DetailedToolTipBtn/DetailedToolTipBtn.tsx
@@ -1,47 +1,85 @@
-import * as React from 'react';
-import Tooltip from '@mui/material/Tooltip';
-import { Button, ClickAwayListener, IconButton } from '@mui/material';
-import { TooltipProps } from '@mui/material/Tooltip';
-import Icon from '@/assets/Icon';
+import * as React from 'react'
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'
+import {
+  Box,
+  ClickAwayListener,
+  IconButton,
+  Typography,
+  styled,
+} from '@mui/material'
+import { TooltipProps } from '@mui/material/Tooltip'
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
+import CloseIcon from '@mui/icons-material/Close'
 
 type DetailedToolTipBtnProps = {
-    messagePopUp: string
-    placement?: TooltipProps["placement"]
+  messagePopUp: string
+  placement?: TooltipProps['placement']
+}
+
+const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: 'black',
+    color: 'white',
+    maxWidth: 280,
+    fontSize: theme.typography.pxToRem(12),
+    border: '1px solid #dadde9',
+  },
+}))
+
+/* General ToolTip function
+Displays a button with an information icon.
+When clicked, it will display the custom messagePopUp next to the button.
+Preferably should contain a message to help user with flow/control navigate.
+
+Can also input a placement which consists of (no input defaults to "bottom"):
+"bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" |
+"left" | "right-end" | "right-start" | "right" | "top-end" | "top-start" |"top"
+*/
+export const DetailedToolTipBtn: React.FC<DetailedToolTipBtnProps> = ({
+  messagePopUp,
+  placement,
+}: DetailedToolTipBtnProps) => {
+  const [open, setOpen] = React.useState(false)
+
+  const handleTooltipClose = () => {
+    setOpen(false)
   }
-  
-  export const DetailedToolTipBtn: React.FC<DetailedToolTipBtnProps> = ({
-    messagePopUp,
-    placement,
-  }: DetailedToolTipBtnProps) => {
-    const [open, setOpen] = React.useState(false);
 
-    const handleTooltipClose = () => {
-      setOpen(false);
-    };
-  
-    const handleTooltipOpen = () => {
-      setOpen(true);
-    };
+  const handleTooltipOpen = () => {
+    setOpen(true)
+  }
 
-    return (
-        <ClickAwayListener onClickAway={handleTooltipClose}>
-            <div>
-              <Tooltip
-                PopperProps={{
-                  disablePortal: true,
-                }}
-                onClose={handleTooltipClose}
-                open={open}
-                disableFocusListener
-                disableHoverListener
-                disableTouchListener
-                title={messagePopUp}
-                placement={placement}
-                arrow
-              >
-                <IconButton onClick={handleTooltipOpen}>Hello</IconButton>
-              </Tooltip>
-            </div>
-          </ClickAwayListener>
-    )
-  }
\ No newline at end of file
+  return (
+    <ClickAwayListener onClickAway={handleTooltipClose}>
+      <div>
+        <HtmlTooltip
+          PopperProps={{
+            disablePortal: true,
+          }}
+          onClose={handleTooltipClose}
+          open={open}
+          disableFocusListener
+          disableHoverListener
+          disableTouchListener
+          placement={placement}
+          title={
+            <React.Fragment>
+              <Box sx={{ display: 'flex', flexDirection: 'row' }}>
+                <Typography color="inherit">{messagePopUp}</Typography>
+                <CloseIcon onClick={handleTooltipClose}>
+                  <InfoOutlinedIcon color="primary" />
+                </CloseIcon>
+              </Box>
+            </React.Fragment>
+          }
+        >
+          <IconButton onClick={handleTooltipOpen}>
+            <InfoOutlinedIcon color="primary" />
+          </IconButton>
+        </HtmlTooltip>
+      </div>
+    </ClickAwayListener>
+  )
+}