Merge pull request #1162 from jguthrie100/add_tooltips

Include tooltips for menu actions

4 files changed, 27 insertions, 10 deletions

diff --git a/modern/src/common/theme/components.js b/modern/src/common/theme/components.js
index d0c7f9c6..572f876e 100644
--- a/modern/src/common/theme/components.js
+++ b/modern/src/common/theme/components.js
@@ -33,4 +33,10 @@ export default {
       },
     },
   },
+  MuiTooltip: {
+    defaultProps: {
+      enterDelay: 500,
+      enterNextDelay: 500,
+    },
+  },
 };
diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js
index 6ce7ae8e..4f31c1b3 100644
--- a/modern/src/other/GeofencesPage.js
+++ b/modern/src/other/GeofencesPage.js
@@ -3,6 +3,7 @@ import { useDispatch } from 'react-redux';
 import {
   Divider, Typography, IconButton, useMediaQuery, Toolbar,
 } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
 import makeStyles from '@mui/styles/makeStyles';
 import { useTheme } from '@mui/material/styles';
 import Drawer from '@mui/material/Drawer';
@@ -117,7 +118,9 @@ const GeofencesPage = () => {
             <label htmlFor="upload-gpx">
               <input accept=".gpx" id="upload-gpx" type="file" className={classes.fileInput} onChange={handleFile} />
               <IconButton edge="end" component="span" onClick={() => {}}>
-                <UploadFileIcon />
+                <Tooltip title={t('sharedUpload')}>
+                  <UploadFileIcon />
+                </Tooltip>
               </IconButton>
             </label>
           </Toolbar>
diff --git a/modern/src/resources/l10n/en.json b/modern/src/resources/l10n/en.json
index d30cad7e..dcfea816 100644
--- a/modern/src/resources/l10n/en.json
+++ b/modern/src/resources/l10n/en.json
@@ -2,6 +2,7 @@
     "sharedLoading": "Loading...",
     "sharedHide": "Hide",
     "sharedSave": "Save",
+    "sharedUpload": "Upload",
     "sharedSet": "Set",
     "sharedCancel": "Cancel",
     "sharedAdd": "Add",
diff --git a/modern/src/settings/components/CollectionActions.js b/modern/src/settings/components/CollectionActions.js
index 177295b1..666052d5 100644
--- a/modern/src/settings/components/CollectionActions.js
+++ b/modern/src/settings/components/CollectionActions.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import {
   IconButton, Menu, MenuItem, useMediaQuery, useTheme,
 } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -73,18 +74,24 @@ const CollectionActions = ({
       ) : (
         <div className={classes.row}>
           {customActions && customActions.map((action) => (
-            <IconButton size="small" onClick={() => handleCustom(action)} key={action.key}>
-              {action.icon}
-            </IconButton>
+            <Tooltip title={action.title} key={action.key}>
+              <IconButton size="small" onClick={() => handleCustom(action)}>
+                {action.icon}
+              </IconButton>
+            </Tooltip>
           ))}
           {!readonly && (
             <>
-              <IconButton size="small" onClick={handleEdit}>
-                <EditIcon fontSize="small" />
-              </IconButton>
-              <IconButton size="small" onClick={handleRemove}>
-                <DeleteIcon fontSize="small" />
-              </IconButton>
+              <Tooltip title={t('sharedEdit')}>
+                <IconButton size="small" onClick={handleEdit}>
+                  <EditIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title={t('sharedRemove')}>
+                <IconButton size="small" onClick={handleRemove}>
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
             </>
           )}
         </div>