Use theme instead of Custom class for delayed tooltips

3 files changed, 13 insertions, 21 deletions

diff --git a/modern/src/common/components/DelayedTooltip.js b/modern/src/common/components/DelayedTooltip.js
deleted file mode 100644
index f1821782..00000000
--- a/modern/src/common/components/DelayedTooltip.js
+++ /dev/null
@@ -1,14 +0,0 @@
-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/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/settings/components/CollectionActions.js b/modern/src/settings/components/CollectionActions.js
index 09218b89..666052d5 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) => (
-            <DelayedTooltip title={action.title} key={action.key}>
+            <Tooltip title={action.title} key={action.key}>
               <IconButton size="small" onClick={() => handleCustom(action)}>
                 {action.icon}
               </IconButton>
-            </DelayedTooltip>
+            </Tooltip>
           ))}
           {!readonly && (
             <>
-              <DelayedTooltip title={t('sharedEdit')}>
+              <Tooltip title={t('sharedEdit')}>
                 <IconButton size="small" onClick={handleEdit}>
                   <EditIcon fontSize="small" />
                 </IconButton>
-              </DelayedTooltip>
-              <DelayedTooltip title={t('sharedRemove')}>
+              </Tooltip>
+              <Tooltip title={t('sharedRemove')}>
                 <IconButton size="small" onClick={handleRemove}>
                   <DeleteIcon fontSize="small" />
                 </IconButton>
-              </DelayedTooltip>
+              </Tooltip>
             </>
           )}
         </div>