feat: Add tooltips to various UI elements (fixes #148).

src/components/CentralContainer/Sidebar/SidebarTabs/TabButton.tsx

@@ -34,11 +34,9 @@ const TabButton = ({tabName, Icon, onTabButtonClick}: TabButtonProps) => {
 
     return (
         <Tooltip
-            arrow={true}
             key={tabName}
             placement={"right"}
             title={TAB_DISPLAY_NAMES[tabName]}
-            variant={"outlined"}
         >
             <Tab
                 className={"sidebar-tab-button"}

src/components/MenuBar/ExportLogsButton.tsx

@@ -17,7 +17,7 @@ import {
     ignorePointerIfFastLoading,
     isDisabled,
 } from "../../utils/states";
-import SmallIconButton from "./SmallIconButton";
+import MenuBarIconButton from "./MenuBarIconButton";
 
 
 /**
@@ -29,8 +29,9 @@ const ExportLogsButton = () => {
     const {exportLogs, exportProgress, uiState} = useContext(StateContext);
 
     return (
-        <SmallIconButton
+        <MenuBarIconButton
             className={ignorePointerIfFastLoading(uiState)}
+            title={"Export logs"}
             disabled={
                 (null !== exportProgress && EXPORT_LOG_PROGRESS_VALUE_MAX !== exportProgress) ||
                 isDisabled(uiState, UI_ELEMENT.EXPORT_LOGS_BUTTON)
@@ -56,7 +57,7 @@ const ExportLogsButton = () => {
                             {Math.ceil(exportProgress * 100)}
                         </Typography>}
                 </CircularProgress>}
-        </SmallIconButton>
+        </MenuBarIconButton>
     );
 };
 

src/components/MenuBar/MenuBarIconButton.tsx

@@ -0,0 +1,39 @@
+import {
+    IconButton,
+    IconButtonProps,
+    Tooltip,
+    TooltipTypeMap,
+} from "@mui/joy";
+
+
+interface MenuBarIconButtonProps extends IconButtonProps {
+    tooltipPlacement?: TooltipTypeMap["props"]["placement"];
+}
+
+/**
+ * An icon button for use in the menu bar.
+ *
+ * @param props
+ * @param props.title Tooltip title.
+ * @param props.tooltipPlacement
+ * @param props.rest
+ * @return
+ */
+const MenuBarIconButton = ({
+    tooltipPlacement,
+    title,
+    ...rest
+}: MenuBarIconButtonProps) => (
+    <Tooltip
+        placement={tooltipPlacement ?? "bottom-end"}
+        title={title}
+    >
+        <span>
+            <IconButton
+                size={"sm"}
+                {...rest}/>
+        </span>
+    </Tooltip>
+);
+
+export default MenuBarIconButton;

src/components/MenuBar/NavigationBar.tsx

@@ -1,9 +1,6 @@
 import React, {useContext} from "react";
 
-import {
-    ButtonGroup,
-    IconButton,
-} from "@mui/joy";
+import {ButtonGroup} from "@mui/joy";
 
 import NavigateBefore from "@mui/icons-material/NavigateBefore";
 import NavigateNext from "@mui/icons-material/NavigateNext";
@@ -17,6 +14,7 @@ import {
     ignorePointerIfFastLoading,
     isDisabled,
 } from "../../utils/states";
+import MenuBarIconButton from "./MenuBarIconButton";
 import PageNumInput from "./PageNumInput";
 
 
@@ -46,37 +44,40 @@ const NavigationBar = () => {
         <ButtonGroup
             className={ignorePointerIfFastLoading(uiState)}
             disabled={isDisabled(uiState, UI_ELEMENT.NAVIGATION_BAR)}
-            size={"sm"}
             spacing={0.01}
             variant={"plain"}
         >
-            <IconButton
+            <MenuBarIconButton
                 data-action-name={ACTION_NAME.FIRST_PAGE}
+                title={"First page"}
                 onClick={handleNavButtonClick}
             >
                 <SkipPrevious/>
-            </IconButton>
-            <IconButton
+            </MenuBarIconButton>
+            <MenuBarIconButton
                 data-action-name={ACTION_NAME.PREV_PAGE}
+                title={"Previous page"}
                 onClick={handleNavButtonClick}
             >
                 <NavigateBefore/>
-            </IconButton>
+            </MenuBarIconButton>
 
             <PageNumInput/>
 
-            <IconButton
+            <MenuBarIconButton
                 data-action-name={ACTION_NAME.NEXT_PAGE}
+                title={"Next page"}
                 onClick={handleNavButtonClick}
             >
                 <NavigateNext/>
-            </IconButton>
-            <IconButton
+            </MenuBarIconButton>
+            <MenuBarIconButton
                 data-action-name={ACTION_NAME.LAST_PAGE}
+                title={"Last page"}
                 onClick={handleNavButtonClick}
             >
                 <SkipNext/>
-            </IconButton>
+            </MenuBarIconButton>
         </ButtonGroup>
     );
 };

src/components/MenuBar/index.tsx

@@ -3,10 +3,8 @@ import {useContext} from "react";
 import {
     Box,
     Divider,
-    IconButton,
     LinearProgress,
     Sheet,
-    Tooltip,
     Typography,
 } from "@mui/joy";
 
@@ -18,6 +16,7 @@ import {CURSOR_CODE} from "../../typings/worker";
 import {openFile} from "../../utils/file";
 import {isDisabled} from "../../utils/states";
 import ExportLogsButton from "./ExportLogsButton";
+import MenuBarIconButton from "./MenuBarIconButton";
 import NavigationBar from "./NavigationBar";
 
 import "./index.css";
@@ -48,20 +47,14 @@ const MenuBar = () => {
                 </div>
 
                 <Divider orientation={"vertical"}/>
-                <Tooltip
-                    arrow={true}
-                    placement={"right"}
+                <MenuBarIconButton
+                    disabled={isDisabled(uiState, UI_ELEMENT.OPEN_FILE_BUTTON)}
                     title={"Open file"}
-                    variant={"outlined"}
+                    tooltipPlacement={"bottom-start"}
+                    onClick={handleOpenFile}
                 >
-                    <IconButton
-                        disabled={isDisabled(uiState, UI_ELEMENT.OPEN_FILE_BUTTON)}
-                        size={"sm"}
-                        onClick={handleOpenFile}
-                    >
-                        <FolderOpenIcon className={"menu-bar-open-file-icon"}/>
-                    </IconButton>
-                </Tooltip>
+                    <FolderOpenIcon className={"menu-bar-open-file-icon"}/>
+                </MenuBarIconButton>
                 <Divider orientation={"vertical"}/>
 
                 <Box

src/components/StatusBar/index.tsx

@@ -3,6 +3,7 @@ import {useContext} from "react";
 import {
     Button,
     Sheet,
+    Tooltip,
     Typography,
 } from "@mui/joy";
 
@@ -39,18 +40,24 @@ const StatusBar = () => {
             <Typography className={"status-message"}>
                 {/* This is left blank intentionally until status messages are implemented. */}
             </Typography>
-            <Button
-                color={"primary"}
-                disabled={isDisabled(uiState, UI_ELEMENT.LOG_EVENT_NUM_DISPLAY)}
-                size={"sm"}
-                variant={"soft"}
-                onClick={handleCopyLinkButtonClick}
-            >
-                {"Log Event "}
-                {logEventNum}
-                {" / "}
-                {numEvents}
-            </Button>
+
+            <Tooltip title={"Copy link to clipboard"}>
+                <span>
+                    <Button
+                        color={"primary"}
+                        disabled={isDisabled(uiState, UI_ELEMENT.LOG_EVENT_NUM_DISPLAY)}
+                        size={"sm"}
+                        variant={"soft"}
+                        onClick={handleCopyLinkButtonClick}
+                    >
+                        {"Log Event "}
+                        {logEventNum}
+                        {" / "}
+                        {numEvents}
+                    </Button>
+                </span>
+            </Tooltip>
+
             <LogLevelSelect/>
         </Sheet>
     );

src/components/theme.tsx

@@ -55,6 +55,12 @@ const APP_THEME = extendTheme({
                 }),
             },
         },
+        JoyTooltip: {
+            defaultProps: {
+                variant: "outlined",
+                arrow: true,
+            },
+        },
     },
     fontFamily: {
         body: "var(--ylv-ui-font-family)",