feat(frontend): add tooltips to buttons

10 files changed, 238 insertions, 193 deletions

diff --git a/subprojects/frontend/src/ToggleDarkModeButton.tsx b/subprojects/frontend/src/ToggleDarkModeButton.tsx
index 7a835e61..58238cab 100644
--- a/subprojects/frontend/src/ToggleDarkModeButton.tsx
+++ b/subprojects/frontend/src/ToggleDarkModeButton.tsx
@@ -7,6 +7,7 @@
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import { observer } from 'mobx-react-lite';
 
 import { useRootStore } from './RootStoreProvider';
@@ -16,12 +17,10 @@ export default observer(function ToggleDarkModeButton(): JSX.Element {
   const { darkMode } = themeStore;
 
   return (
-    <IconButton
-      color="inherit"
-      onClick={() => themeStore.toggleDarkMode()}
-      aria-label={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
-    >
-      {darkMode ? <LightModeIcon /> : <DarkModeIcon />}
-    </IconButton>
+    <Tooltip title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}>
+      <IconButton color="inherit" onClick={() => themeStore.toggleDarkMode()}>
+        {darkMode ? <LightModeIcon /> : <DarkModeIcon />}
+      </IconButton>
+    </Tooltip>
   );
 });
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
index 6c9c4f7e..e41f956e 100644
--- a/subprojects/frontend/src/TopBar.tsx
+++ b/subprojects/frontend/src/TopBar.tsx
@@ -9,6 +9,7 @@ import AppBar from '@mui/material/AppBar';
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import Toolbar from '@mui/material/Toolbar';
+import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { styled, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -134,7 +135,7 @@ export default observer(function TopBar(): JSX.Element {
           py: 0.5,
         }}
       >
-        <RefineryIcon size={24} />
+        <RefineryIcon size={32} />
         <Typography variant="h6" component="h1" pl={1}>
           Refinery {import.meta.env.DEV && <DevModeBadge>Dev</DevModeBadge>}
         </Typography>
@@ -172,14 +173,15 @@ export default observer(function TopBar(): JSX.Element {
         >
           <GenerateButton editorStore={editorStore} hideWarnings={!veryLarge} />
           {large && (
-            <IconButton
-              aria-label="GitHub"
-              href="https://github.com/graphs4value/refinery"
-              target="_blank"
-              color="inherit"
-            >
-              <GitHubIcon />
-            </IconButton>
+            <Tooltip title="Check us out at GitHub">
+              <IconButton
+                href="https://github.com/graphs4value/refinery"
+                target="_blank"
+                color="inherit"
+              >
+                <GitHubIcon />
+              </IconButton>
+            </Tooltip>
           )}
         </Stack>
         <ToggleDarkModeButton />
diff --git a/subprojects/frontend/src/editor/ConnectButton.tsx b/subprojects/frontend/src/editor/ConnectButton.tsx
index eed6fbc7..d08fbb4d 100644
--- a/subprojects/frontend/src/editor/ConnectButton.tsx
+++ b/subprojects/frontend/src/editor/ConnectButton.tsx
@@ -9,6 +9,7 @@ import CloudOffIcon from '@mui/icons-material/CloudOff';
 import SyncIcon from '@mui/icons-material/Sync';
 import SyncProblemIcon from '@mui/icons-material/SyncProblem';
 import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import { keyframes, styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 
@@ -37,37 +38,51 @@ export default observer(function ConnectButton({
     (editorStore.opening || editorStore.opened)
   ) {
     return (
-      <IconButton
-        onClick={() => editorStore.disconnect()}
-        aria-label="Disconnect"
-        color="inherit"
+      <Tooltip
+        title={
+          editorStore.opening
+            ? 'Connecting (click to cancel)'
+            : 'Connected (click to disconnect)'
+        }
       >
-        {editorStore.opening ? (
-          <AnimatedSyncIcon fontSize="small" />
-        ) : (
-          <CloudIcon fontSize="small" />
-        )}
-      </IconButton>
+        <IconButton
+          onClick={() => editorStore.disconnect()}
+          aria-label="Disconnect"
+          color="inherit"
+        >
+          {editorStore.opening ? (
+            <AnimatedSyncIcon fontSize="small" />
+          ) : (
+            <CloudIcon fontSize="small" />
+          )}
+        </IconButton>
+      </Tooltip>
     );
   }
 
+  let title: string;
   let disconnectedIcon: JSX.Element;
   if (editorStore === undefined) {
+    title = 'Connecting';
     disconnectedIcon = <SyncIcon fontSize="small" />;
   } else if (editorStore.connectionErrors.length > 0) {
+    title = 'Connection error (click to retry)';
     disconnectedIcon = <SyncProblemIcon fontSize="small" />;
   } else {
+    title = 'Disconnected (click to connect)';
     disconnectedIcon = <CloudOffIcon fontSize="small" />;
   }
 
   return (
-    <IconButton
-      disabled={editorStore === undefined}
-      onClick={() => editorStore?.connect()}
-      aria-label="Connect"
-      color="inherit"
-    >
-      {disconnectedIcon}
-    </IconButton>
+    <Tooltip title={title}>
+      <IconButton
+        disabled={editorStore === undefined}
+        onClick={() => editorStore?.connect()}
+        aria-label="Connect"
+        color="inherit"
+      >
+        {disconnectedIcon}
+      </IconButton>
+    </Tooltip>
   );
 });
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index 4afba607..50cd51dc 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -22,6 +22,7 @@ import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Tooltip from '@mui/material/Tooltip';
 import { observer } from 'mobx-react-lite';
 
 import ConnectButton from './ConnectButton';
@@ -49,103 +50,113 @@ export default observer(function EditorButtons({
 }): JSX.Element {
   return (
     <Stack direction="row" flexGrow={1}>
-      <IconButton
-        disabled={editorStore === undefined}
-        onClick={() => editorStore?.openFile()}
-        aria-label="Open"
-        color="inherit"
-      >
-        <FileOpenIcon fontSize="small" />
-      </IconButton>
-      <IconButton
-        disabled={editorStore === undefined || !editorStore.unsavedChanges}
-        onClick={() => editorStore?.saveFile()}
-        aria-label="Save"
-        color="inherit"
-      >
-        <SaveIcon fontSize="small" />
-      </IconButton>
-      {'showSaveFilePicker' in window && (
+      <Tooltip title="Open">
         <IconButton
           disabled={editorStore === undefined}
-          onClick={() => editorStore?.saveFileAs()}
-          aria-label="Save as"
+          onClick={() => editorStore?.openFile()}
           color="inherit"
         >
-          <SaveAsIcon fontSize="small" />
+          <FileOpenIcon fontSize="small" />
         </IconButton>
-      )}
-      <IconButton
-        disabled={editorStore === undefined || !editorStore.canUndo}
-        onClick={() => editorStore?.undo()}
-        aria-label="Undo"
-        color="inherit"
-        sx={{ ml: 1 }}
-      >
-        <UndoIcon fontSize="small" />
-      </IconButton>
-      <IconButton
-        disabled={editorStore === undefined || !editorStore.canRedo}
-        onClick={() => editorStore?.redo()}
-        aria-label="Redo"
-        color="inherit"
-      >
-        <RedoIcon fontSize="small" />
-      </IconButton>
-      <ToggleButtonGroup size="small" className="rounded" sx={{ mx: 1 }}>
-        <ToggleButton
-          selected={editorStore?.showLineNumbers ?? false}
-          disabled={editorStore === undefined}
-          onClick={() => editorStore?.toggleLineNumbers()}
-          aria-label="Show line numbers"
-          value="show-line-numbers"
-        >
-          <FormatListNumberedIcon fontSize="small" />
-        </ToggleButton>
-        <ToggleButton
-          selected={editorStore?.colorIdentifiers ?? false}
-          disabled={editorStore === undefined}
-          onClick={() => editorStore?.toggleColorIdentifiers()}
-          aria-label="Color identifiers"
-          value="color-identifiers"
+      </Tooltip>
+      <Tooltip title="Save">
+        <IconButton
+          disabled={editorStore === undefined || !editorStore.unsavedChanges}
+          onClick={() => editorStore?.saveFile()}
+          color="inherit"
         >
-          <LooksIcon fontSize="small" />
-        </ToggleButton>
-        <ToggleButton
-          selected={editorStore?.searchPanel?.state ?? false}
-          disabled={editorStore === undefined}
-          onClick={() => editorStore?.searchPanel?.toggle()}
-          aria-label="Show find/replace"
-          {...(editorStore !== undefined &&
-            editorStore.searchPanel.state && {
-              'aria-controls': editorStore.searchPanel.id,
-            })}
-          value="show-search-panel"
+          <SaveIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+      {'showSaveFilePicker' in window && (
+        <Tooltip title={`Save as\u2026`}>
+          <IconButton
+            disabled={editorStore === undefined}
+            onClick={() => editorStore?.saveFileAs()}
+            color="inherit"
+          >
+            <SaveAsIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+      )}
+      <Tooltip title="Undo">
+        <IconButton
+          disabled={editorStore === undefined || !editorStore.canUndo}
+          onClick={() => editorStore?.undo()}
+          color="inherit"
+          sx={{ ml: 1 }}
         >
-          <SearchIcon fontSize="small" />
-        </ToggleButton>
-        <ToggleButton
-          selected={editorStore?.lintPanel?.state ?? false}
-          disabled={editorStore === undefined}
-          onClick={() => editorStore?.lintPanel.toggle()}
-          aria-label="Show diagnostics panel"
-          {...(editorStore !== undefined &&
-            editorStore.lintPanel.state && {
-              'aria-controls': editorStore.lintPanel.id,
-            })}
-          value="show-lint-panel"
+          <UndoIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title="Redo">
+        <IconButton
+          disabled={editorStore === undefined || !editorStore.canRedo}
+          onClick={() => editorStore?.redo()}
+          color="inherit"
         >
-          {getLintIcon(editorStore?.delayedErrors?.highestDiagnosticLevel)}
-        </ToggleButton>
+          <RedoIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+      <ToggleButtonGroup size="small" className="rounded" sx={{ mx: 1 }}>
+        <Tooltip title="Line numbers">
+          <ToggleButton
+            selected={editorStore?.showLineNumbers ?? false}
+            disabled={editorStore === undefined}
+            onClick={() => editorStore?.toggleLineNumbers()}
+            value="show-line-numbers"
+          >
+            <FormatListNumberedIcon fontSize="small" />
+          </ToggleButton>
+        </Tooltip>
+        <Tooltip title="Color identifiers">
+          <ToggleButton
+            selected={editorStore?.colorIdentifiers ?? false}
+            disabled={editorStore === undefined}
+            onClick={() => editorStore?.toggleColorIdentifiers()}
+            value="color-identifiers"
+          >
+            <LooksIcon fontSize="small" />
+          </ToggleButton>
+        </Tooltip>
+        <Tooltip title="Find and replace">
+          <ToggleButton
+            selected={editorStore?.searchPanel?.state ?? false}
+            disabled={editorStore === undefined}
+            onClick={() => editorStore?.searchPanel?.toggle()}
+            {...(editorStore !== undefined &&
+              editorStore.searchPanel.state && {
+                'aria-controls': editorStore.searchPanel.id,
+              })}
+            value="show-search-panel"
+          >
+            <SearchIcon fontSize="small" />
+          </ToggleButton>
+        </Tooltip>
+        <Tooltip title="Diagnostics panel">
+          <ToggleButton
+            selected={editorStore?.lintPanel?.state ?? false}
+            disabled={editorStore === undefined}
+            onClick={() => editorStore?.lintPanel.toggle()}
+            {...(editorStore !== undefined &&
+              editorStore.lintPanel.state && {
+                'aria-controls': editorStore.lintPanel.id,
+              })}
+            value="show-lint-panel"
+          >
+            {getLintIcon(editorStore?.delayedErrors?.highestDiagnosticLevel)}
+          </ToggleButton>
+        </Tooltip>
       </ToggleButtonGroup>
-      <IconButton
-        disabled={editorStore === undefined || !editorStore.opened}
-        onClick={() => editorStore?.formatText()}
-        aria-label="Automatic format"
-        color="inherit"
-      >
-        <FormatPaintIcon fontSize="small" />
-      </IconButton>
+      <Tooltip title="Automatic format">
+        <IconButton
+          disabled={editorStore === undefined || !editorStore.opened}
+          onClick={() => editorStore?.formatText()}
+          color="inherit"
+        >
+          <FormatPaintIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
       <ConnectButton editorStore={editorStore} />
     </Stack>
   );
diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx
index 4ae7e893..bfdff234 100644
--- a/subprojects/frontend/src/editor/SearchToolbar.tsx
+++ b/subprojects/frontend/src/editor/SearchToolbar.tsx
@@ -17,15 +17,14 @@ import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import ToggleButton from '@mui/material/ToggleButton';
 import Toolbar from '@mui/material/Toolbar';
+import Tooltip from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import { observer } from 'mobx-react-lite';
 import { useCallback, useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
 
 import type SearchPanelStore from './SearchPanelStore';
 
-const SPLIT_MEDIA_QUERY = '@media (max-width: 1200px)';
-
 const DimLabel = styled(FormControlLabel)(({ theme }) => ({
   '.MuiFormControlLabel-label': {
     ...theme.typography.body2,
@@ -43,7 +42,8 @@ export default observer(function SearchToolbar({
     query: { search, valid, caseSensitive, literal, regexp, replace },
     invalidRegexp,
   } = searchPanelStore;
-  const split = useMediaQuery(SPLIT_MEDIA_QUERY);
+  const { width, ref } = useResizeDetector();
+  const split = width !== undefined && width <= 1200;
   const [showRepalceState, setShowReplaceState] = useState(false);
 
   const showReplace = !split || showRepalceState || replace !== '';
@@ -61,16 +61,19 @@ export default observer(function SearchToolbar({
     <Toolbar
       variant="dense"
       sx={{ py: 0.5, alignItems: 'center', minHeight: 'auto' }}
+      ref={ref}
     >
       <Stack
         direction={split ? 'column' : 'row'}
         sx={{
           alignItems: 'center',
           flexGrow: 1,
-          [SPLIT_MEDIA_QUERY]: {
-            alignItems: 'start',
-            gap: 0.5,
-          },
+          ...(split
+            ? {
+                alignItems: 'start',
+                gap: 0.5,
+              }
+            : {}),
         }}
       >
         <Stack direction="row" flexWrap="wrap" alignItems="center" rowGap={0.5}>
@@ -121,22 +124,24 @@ export default observer(function SearchToolbar({
             mr={1}
             rowGap={0.5}
           >
-            <IconButton
-              aria-label="Previous"
-              disabled={!valid}
-              onClick={() => searchPanelStore.findPrevious()}
-              color="inherit"
-            >
-              <KeyboardArrowUpIcon fontSize="small" />
-            </IconButton>
-            <IconButton
-              aria-label="Next"
-              disabled={!valid}
-              onClick={() => searchPanelStore.findNext()}
-              color="inherit"
-            >
-              <KeyboardArrowDownIcon fontSize="small" />
-            </IconButton>
+            <Tooltip title="Previous match">
+              <IconButton
+                disabled={!valid}
+                onClick={() => searchPanelStore.findPrevious()}
+                color="inherit"
+              >
+                <KeyboardArrowUpIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Next match">
+              <IconButton
+                disabled={!valid}
+                onClick={() => searchPanelStore.findNext()}
+                color="inherit"
+              >
+                <KeyboardArrowDownIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
           </Stack>
           <Stack
             direction="row"
@@ -187,24 +192,25 @@ export default observer(function SearchToolbar({
               label="Regexp"
             />
             {split && (
-              <ToggleButton
-                value="show-replace"
-                selected={showReplace}
-                onClick={() => {
-                  if (showReplace) {
-                    searchPanelStore.updateQuery({ replace: '' });
-                    setShowReplaceState(false);
-                  } else {
-                    setShowReplaceState(true);
-                  }
-                }}
-                aria-label="Show replace options"
-                aria-controls={replaceId}
-                size="small"
-                className="iconOnly"
-              >
-                <FindReplaceIcon fontSize="small" />
-              </ToggleButton>
+              <Tooltip title="Replace">
+                <ToggleButton
+                  value="show-replace"
+                  selected={showReplace}
+                  onClick={() => {
+                    if (showReplace) {
+                      searchPanelStore.updateQuery({ replace: '' });
+                      setShowReplaceState(false);
+                    } else {
+                      setShowReplaceState(true);
+                    }
+                  }}
+                  aria-controls={replaceId}
+                  size="small"
+                  className="iconOnly"
+                >
+                  <FindReplaceIcon fontSize="small" />
+                </ToggleButton>
+              </Tooltip>
             )}
           </Stack>
         </Stack>
@@ -263,9 +269,7 @@ export default observer(function SearchToolbar({
         alignSelf="stretch"
         alignItems="start"
         mt="1px"
-        sx={{
-          [SPLIT_MEDIA_QUERY]: { display: 'none' },
-        }}
+        sx={split ? { display: 'none' } : {}}
       >
         <IconButton
           aria-label="Close find/replace"
diff --git a/subprojects/frontend/src/graph/SlideInPanel.tsx b/subprojects/frontend/src/graph/SlideInPanel.tsx
index 2c189b5b..47bbe0a6 100644
--- a/subprojects/frontend/src/graph/SlideInPanel.tsx
+++ b/subprojects/frontend/src/graph/SlideInPanel.tsx
@@ -8,6 +8,7 @@ import Dialog from '@mui/material/Dialog';
 import IconButton from '@mui/material/IconButton';
 import Paper from '@mui/material/Paper';
 import Slide from '@mui/material/Slide';
+import Tooltip from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
 import React, { useCallback, useId, useState } from 'react';
 
@@ -58,15 +59,19 @@ export default function SlideInPanel({
 
   return (
     <SlideInPanelRoot anchor={anchor}>
-      <IconButton
-        role="switch"
-        aria-checked={show}
-        aria-controls={dialog ? undefined : id}
-        aria-label={iconLabel}
-        onClick={() => setShow(!show)}
+      <Tooltip
+        title={iconLabel}
+        placement={anchor === 'left' ? 'right' : 'left'}
       >
-        {icon(show)}
-      </IconButton>
+        <IconButton
+          role="switch"
+          aria-checked={show}
+          aria-controls={dialog ? undefined : id}
+          onClick={() => setShow(!show)}
+        >
+          {icon(show)}
+        </IconButton>
+      </Tooltip>
       {dialog ? (
         <Dialog open={show} onClose={close} maxWidth="xl">
           <SlideInDialog close={close} dialog title={title} buttons={buttons}>
diff --git a/subprojects/frontend/src/graph/VisibilityPanel.tsx b/subprojects/frontend/src/graph/VisibilityPanel.tsx
index 210ff5d5..8474b7be 100644
--- a/subprojects/frontend/src/graph/VisibilityPanel.tsx
+++ b/subprojects/frontend/src/graph/VisibilityPanel.tsx
@@ -199,7 +199,7 @@ function VisibilityPanel({
       dialog={dialog}
       title="Customize view"
       icon={icon}
-      iconLabel="Show filter panel"
+      iconLabel="Filter panel"
       buttons={
         <>
           <Button
diff --git a/subprojects/frontend/src/graph/ZoomButtons.tsx b/subprojects/frontend/src/graph/ZoomButtons.tsx
index 83938cf4..b292a617 100644
--- a/subprojects/frontend/src/graph/ZoomButtons.tsx
+++ b/subprojects/frontend/src/graph/ZoomButtons.tsx
@@ -10,6 +10,7 @@ import RemoveIcon from '@mui/icons-material/Remove';
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import ToggleButton from '@mui/material/ToggleButton';
+import Tooltip from '@mui/material/Tooltip';
 
 import type { ChangeZoomCallback, SetFitZoomCallback } from './ZoomCanvas';
 
@@ -28,22 +29,27 @@ export default function ZoomButtons({
       p={1}
       sx={{ position: 'absolute', bottom: 0, right: 0 }}
     >
-      <IconButton aria-label="Zoom in" onClick={() => changeZoom(2)}>
-        <AddIcon fontSize="small" />
-      </IconButton>
-      <IconButton aria-label="Zoom out" onClick={() => changeZoom(0.5)}>
-        <RemoveIcon fontSize="small" />
-      </IconButton>
-      <ToggleButton
-        value="show-replace"
-        selected={fitZoom}
-        onClick={() => setFitZoom(!fitZoom)}
-        aria-label="Fit screen"
-        size="small"
-        className="iconOnly"
-      >
-        <CropFreeIcon fontSize="small" />
-      </ToggleButton>
+      <Tooltip title="Zoom in" placement="left">
+        <IconButton onClick={() => changeZoom(2)}>
+          <AddIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title="Zoom out" placement="left">
+        <IconButton onClick={() => changeZoom(0.5)}>
+          <RemoveIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title="Fit screen" placement="left">
+        <ToggleButton
+          value="show-replace"
+          selected={fitZoom}
+          onClick={() => setFitZoom(!fitZoom)}
+          size="small"
+          className="iconOnly"
+        >
+          <CropFreeIcon fontSize="small" />
+        </ToggleButton>
+      </Tooltip>
     </Stack>
   );
 }
diff --git a/subprojects/frontend/src/graph/export/ExportPanel.tsx b/subprojects/frontend/src/graph/export/ExportPanel.tsx
index 8d82b95c..81bd9081 100644
--- a/subprojects/frontend/src/graph/export/ExportPanel.tsx
+++ b/subprojects/frontend/src/graph/export/ExportPanel.tsx
@@ -135,7 +135,7 @@ function ExportPanel({
       dialog={dialog}
       title="Export diagram"
       icon={icon}
-      iconLabel="Show export panel"
+      iconLabel={`Export image\u2026`}
       buttons={buttons}
     >
       <SwitchButtonGroup size="small" className="rounded">
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 6905fb4b..1d70dbaf 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -206,6 +206,9 @@ function createResponsiveTheme(
           tooltip: {
             background: alpha('#212121', 0.93),
             color: '#fff',
+            fontSize: '0.875rem',
+            lineHeight: 1.43,
+            letterSpacing: '0.01071em',
           },
           arrow: {
             color: alpha('#212121', 0.93),