Create DelayedTooltip component

1 files changed, 7 insertions, 7 deletions

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>