Create DelayedTooltip component

4 files changed, 25 insertions, 10 deletions

diff --git a/modern/.env b/modern/.env
index 30d7591a..5f78fd1e 100644
--- a/modern/.env
+++ b/modern/.env
@@ -1,4 +1,3 @@
 ESLINT_NO_DEV_ERRORS=false
 REACT_APP_URL_NAME='localhost:8082'
-REACT_APP_VERSION=$npm_package_version
-REACT_APP_TOOLTIP_DELAY=750
\ No newline at end of file
+REACT_APP_VERSION=$npm_package_version
\ No newline at end of file
diff --git a/modern/src/common/components/DelayedTooltip.js b/modern/src/common/components/DelayedTooltip.js
new file mode 100644
index 00000000..c8872adb
--- /dev/null
+++ b/modern/src/common/components/DelayedTooltip.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import Tooltip from '@mui/material/Tooltip';
+
+const DelayedTooltip = ({
+  ...props
+}) => {
+  (
+    <Tooltip
+      {...props}
+      enterDelay={700}
+      enterNextDelay={700}
+    />
+  );
+};
+
+export default DelayedTooltip;
diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js
index 37875a67..fcc7153d 100644
--- a/modern/src/other/GeofencesPage.js
+++ b/modern/src/other/GeofencesPage.js
@@ -118,7 +118,7 @@ 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={() => {}}>
-                <Tooltip title={t('sharedUploadGeofence')} enterDelay={process.env.REACT_APP_TOOLTIP_DELAY} enterNextDelay={process.env.REACT_APP_TOOLTIP_DELAY}>
+                <Tooltip title={t('sharedUploadGeofence')}>
                   <UploadFileIcon />
                 </Tooltip>
               </IconButton>
diff --git a/modern/src/settings/components/CollectionActions.js b/modern/src/settings/components/CollectionActions.js
index 287be964..09218b89 100644
--- a/modern/src/settings/components/CollectionActions.js
+++ b/modern/src/settings/components/CollectionActions.js
@@ -2,12 +2,12 @@ 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';
 import { useNavigate } from 'react-router-dom';
 import { makeStyles } from '@mui/styles';
+import DelayedTooltip from '../../common/components/DelayedTooltip';
 import RemoveDialog from '../../common/components/RemoveDialog';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 
@@ -74,24 +74,24 @@ const CollectionActions = ({
       ) : (
         <div className={classes.row}>
           {customActions && customActions.map((action) => (
-            <Tooltip title={action.title} enterDelay={process.env.REACT_APP_TOOLTIP_DELAY} enterNextDelay={process.env.REACT_APP_TOOLTIP_DELAY} key={action.key}>
+            <DelayedTooltip title={action.title} key={action.key}>
               <IconButton size="small" onClick={() => handleCustom(action)}>
                 {action.icon}
               </IconButton>
-            </Tooltip>
+            </DelayedTooltip>
           ))}
           {!readonly && (
             <>
-              <Tooltip title={t('sharedEdit')} enterDelay={process.env.REACT_APP_TOOLTIP_DELAY} enterNextDelay={process.env.REACT_APP_TOOLTIP_DELAY}>
+              <DelayedTooltip title={t('sharedEdit')}>
                 <IconButton size="small" onClick={handleEdit}>
                   <EditIcon fontSize="small" />
                 </IconButton>
-              </Tooltip>
-              <Tooltip title={t('sharedRemove')} enterDelay={process.env.REACT_APP_TOOLTIP_DELAY} enterNextDelay={process.env.REACT_APP_TOOLTIP_DELAY}>
+              </DelayedTooltip>
+              <DelayedTooltip title={t('sharedRemove')}>
                 <IconButton size="small" onClick={handleRemove}>
                   <DeleteIcon fontSize="small" />
                 </IconButton>
-              </Tooltip>
+              </DelayedTooltip>
             </>
           )}
         </div>