diff --git a/src/components/selectionbar/SelectionButtons.tsx b/src/components/selectionbar/SelectionButtons.tsx
index 3b69125..72e9a0d 100644
--- a/src/components/selectionbar/SelectionButtons.tsx
+++ b/src/components/selectionbar/SelectionButtons.tsx
@@ -1,27 +1,21 @@
 import React from 'react';
-import { IconButton, Icon, Tooltip, Whisper } from 'rsuite';
+import { IconButton, Icon } from 'rsuite';
 import { useAppDispatch } from '../../redux/hooks';
 import { clearSelected } from '../../redux/multiSelectSlice';
-
-const tooltip = (text: string) => <Tooltip>{text}</Tooltip>;
+import CustomTooltip from '../shared/CustomTooltip';
 
 const CustomIconButton = ({ tooltipText, icon, handleClick, ...rest }: any) => {
   return (
     <>
       {tooltipText ? (
-        <Whisper
-          placement="top"
-          trigger="hover"
-          delay={300}
-          speaker={tooltip(tooltipText)}
-        >
+        <CustomTooltip text={tooltipText}>
           <IconButton
             size="xs"
             {...rest}
             icon={<Icon icon={icon} {...rest} />}
             onClick={handleClick}
           />
-        </Whisper>
+        </CustomTooltip>
       ) : (
         <IconButton size="xs" icon={<Icon icon={icon} {...rest} />} />
       )}
diff --git a/src/components/shared/CustomTooltip.tsx b/src/components/shared/CustomTooltip.tsx
new file mode 100644
index 0000000..605cabf
--- /dev/null
+++ b/src/components/shared/CustomTooltip.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Tooltip, Whisper } from 'rsuite';
+
+export const tooltip = (text: string) => <Tooltip>{text}</Tooltip>;
+
+const CustomTooltip = ({ children, text, delay }: any) => {
+  return (
+    <Whisper
+      placement="top"
+      trigger="hover"
+      delay={delay || 300}
+      speaker={tooltip(text)}
+    >
+      {children}
+    </Whisper>
+  );
+};
+
+export default CustomTooltip;