reverted to using Tooltip with disableInteractive flag

jhuopensource · Feb 19, 2024 · 0114dce · 0114dce
1 parent 2305d18
commit 0114dce
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 75 deletions.
diff --git a/static/css/timetable/partials/side_bar.scss b/static/css/timetable/partials/side_bar.scss
@@ -132,26 +132,6 @@
   transition: background-color 0.3s;
 }
 
-.tt-tooltip-container {
-  display: block;
-  height: 15px;
-  margin-right: 7px;
-}
-
-.tt-tooltip-text {
-  color: $g777;
-  font-size: 10px;
-  font-style: italic;
-  margin: 0;
-  padding: 10px 5px 5px 10px;
-}
-
-.tt-top-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
 .sb-header {
   clear: both;
   color: $g777;

diff --git a/static/js/redux/ui/SideBar.tsx b/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,
@@ -78,8 +80,6 @@ const SideBar = () => {
   const [hoveredCourse, setHoveredCourse] = useState(-1);
   const [masterSlotListLength, setMasterSlotListLength] = useState(0);
 
-  const [tooltip, setTooltip] = useState(" ");
-
   const hideDropdown = () => {
     setShowDropdown(false);
 
@@ -107,59 +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
-              )
-            }
-            onMouseEnter={() => {
-              setTooltip("Delete");
-            }}
-            onMouseLeave={() => {
-              setTooltip(" ");
-            }}
-            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)
-            }
-            onMouseEnter={() => {
-              setTooltip("Duplicate");
-            }}
-            onMouseLeave={() => {
-              setTooltip(" ");
-            }}
-            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();
-              }}
-              onMouseEnter={() => {
-                setTooltip("Compare");
-              }}
-              onMouseLeave={() => {
-                setTooltip(" ");
-              }}
+              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>
       ))
@@ -273,12 +272,7 @@ const SideBar = () => {
             <div className="tip-border" />
             <div className="tip" />
 
-            <div className="tt-top-row">
-              <h4>{`${semester.name} ${semester.year}`}</h4>
-              <div className="tt-tooltip-container">
-                <p className="tt-tooltip-text">{tooltip}</p>
-              </div>
-            </div>
+            <h4>{`${semester.name} ${semester.year}`}</h4>
 
             {savedTimetables}
             <CreateNewTimetableButton setSidebarDropdown={setShowDropdown} />