Add tooltips to icon buttons

CBIIT · Oct 8, 2024 · aab82a8 · aab82a8
1 parent 7bd4be8
commit aab82a8
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 21 deletions.
diff --git a/src/components/DataSubmissions/DataSubmissionListFilters.tsx b/src/components/DataSubmissions/DataSubmissionListFilters.tsx
@@ -12,6 +12,7 @@ import { useAuthContext } from "../Contexts/AuthContext";
 import { canViewOtherOrgRoles } from "../../config/AuthRoles";
 import { Column } from "../GenericTable";
 import { useSearchParamsContext } from "../Contexts/SearchParamsContext";
+import Tooltip from "../Tooltip";
 
 const StyledFilters = styled("div")({
   paddingTop: "19px",
@@ -46,7 +47,7 @@ const StyledTextField = styled(StyledTextFieldFormComponent)({
 
 const StyledRefreshIcon = styled(RefreshIcon)({
   transform: "scale(-1, 1)",
-  color: "#327E8F",
+  color: "#346798",
   fontSize: "31px",
 });
 
@@ -522,13 +523,20 @@ const DataSubmissionListFilters = ({
         {/* Action Buttons */}
         <ActionButtonsContainer>
           <StyledActionWrapper>
-            <StyledIconButton
-              onClick={handleResetFilters}
-              data-testid="reset-filters-button"
-              aria-label="Reset filters button"
+            <Tooltip
+              open={undefined}
+              title="Reset filters."
+              placement="top"
+              disableHoverListener={false}
             >
-              <StyledRefreshIcon />
-            </StyledIconButton>
+              <StyledIconButton
+                onClick={handleResetFilters}
+                data-testid="reset-filters-button"
+                aria-label="Reset filters button"
+              >
+                <StyledRefreshIcon />
+              </StyledIconButton>
+            </Tooltip>
           </StyledActionWrapper>
           <StyledActionWrapper>
             <ColumnVisibilityButton

diff --git a/src/components/GenericTable/ColumnVisibilityButton.tsx b/src/components/GenericTable/ColumnVisibilityButton.tsx
@@ -3,6 +3,7 @@ import { IconButton, Stack, styled } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { ReactComponent as TableColumnsIcon } from "../../assets/icons/table_columns_icon.svg";
 import ColumnVisibilityPopper from "./ColumnVisibilityPopper";
+import Tooltip from "../Tooltip";
 
 const StyledIconButton = styled(IconButton)({
   padding: 0,
@@ -60,21 +61,28 @@ const ColumnVisibilityButton = <C extends { hideable?: boolean }>({
 
   return (
     <>
-      <StyledIconButton
-        onClick={handleOpenPopper}
-        aria-label="Manage columns button"
-        data-testid="column-visibility-button"
-        disableTouchRipple
-        disableRipple
-        disableFocusRipple
+      <Tooltip
+        open={undefined}
+        title="View filterable columns."
+        placement="top"
+        disableHoverListener={false}
       >
-        {icon ?? (
-          <Stack direction="row">
-            <StyledTableColumnsIcon />
-            <StyledExpandMoreIcon />
-          </Stack>
-        )}
-      </StyledIconButton>
+        <StyledIconButton
+          onClick={handleOpenPopper}
+          aria-label="Manage columns button"
+          data-testid="column-visibility-button"
+          disableTouchRipple
+          disableRipple
+          disableFocusRipple
+        >
+          {icon ?? (
+            <Stack direction="row">
+              <StyledTableColumnsIcon />
+              <StyledExpandMoreIcon />
+            </Stack>
+          )}
+        </StyledIconButton>
+      </Tooltip>
       <ColumnVisibilityPopper
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}