Merge pull request #1086 from spencerckhuang/refactor/timetable-dropd…

…own-tooltips

Adding tooltip when hovering over icon in timetable drop down

static/js/redux/ui/SideBar.tsx

@@ -41,6 +41,8 @@ import AvgCourseRating from "./AvgCourseRating";
 import { selectSlotColorData, selectTheme } from "../state/slices/themeSlice";
 import { peerModalActions } from "../state/slices/peerModalSlice";
 import CreateNewTimetableButton from "./CreateNewTimetableButton";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
 
 /**
  * This component displays the timetable name, allows you to switch between timetables,
@@ -105,41 +107,58 @@ const SideBar = () => {
     ? savedTimetablesState.map((t: Timetable) => (
         <div className="tt-name" key={t.id} onClick={() => dispatch(loadTimetable(t))}>
           {t.name}
-          <button
-            onClick={(event) =>
-              stopPropagation(
-                () => dispatch(alertsActions.alertDeleteTimetable(t)),
-                event
-              )
-            }
-            className="row-button"
+          <Tooltip
+            title={<Typography fontSize={12}>Delete</Typography>}
+            disableInteractive
           >
-            <i className="fa fa-trash-o" />
-          </button>
-          <button
-            onClick={(event) =>
-              stopPropagation(() => dispatch(duplicateTimetable(t)), event)
-            }
-            className="row-button"
+            <button
+              onClick={(event) =>
+                stopPropagation(
+                  () => dispatch(alertsActions.alertDeleteTimetable(t)),
+                  event
+                )
+              }
+              className="row-button"
+            >
+              <i className="fa fa-trash-o" />
+            </button>
+          </Tooltip>
+
+          <Tooltip
+            title={<Typography fontSize={12}>Duplicate</Typography>}
+            disableInteractive
           >
-            <i className="fa fa-clone" />
-          </button>
-          {!isMobile && activeTimetable.name !== t.name && (
             <button
-              onClick={(event) => {
-                dispatch(
-                  startComparingTimetables({
-                    activeTimetable,
-                    comparedTimetable: t,
-                    theme: curTheme,
-                  })
-                );
-                event.stopPropagation();
-              }}
+              onClick={(event) =>
+                stopPropagation(() => dispatch(duplicateTimetable(t)), event)
+              }
               className="row-button"
             >
-              <i className="fa-solid fa-arrows-left-right" />
+              <i className="fa fa-clone" />
             </button>
+          </Tooltip>
+
+          {!isMobile && activeTimetable.name !== t.name && (
+            <Tooltip
+              title={<Typography fontSize={12}>Compare</Typography>}
+              disableInteractive
+            >
+              <button
+                onClick={(event) => {
+                  dispatch(
+                    startComparingTimetables({
+                      activeTimetable,
+                      comparedTimetable: t,
+                      theme: curTheme,
+                    })
+                  );
+                  event.stopPropagation();
+                }}
+                className="row-button"
+              >
+                <i className="fa-solid fa-arrows-left-right" />
+              </button>
+            </Tooltip>
           )}
         </div>
       ))
@@ -252,7 +271,9 @@ const SideBar = () => {
           >
             <div className="tip-border" />
             <div className="tip" />
+
             <h4>{`${semester.name} ${semester.year}`}</h4>
+
             {savedTimetables}
             <CreateNewTimetableButton setSidebarDropdown={setShowDropdown} />
           </div>