diff --git a/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/__snapshots__/file_preview_modal_main_nav.test.tsx.snap b/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/__snapshots__/file_preview_modal_main_nav.test.tsx.snap
index 2d162de260..510d9aae7e 100644
--- a/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/__snapshots__/file_preview_modal_main_nav.test.tsx.snap
+++ b/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/__snapshots__/file_preview_modal_main_nav.test.tsx.snap
@@ -4,26 +4,15 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
 <div
   className="file_preview_modal_main_nav"
 >
-  <OverlayTrigger
-    defaultOverlayShown={false}
-    delayShow={400}
+  <WithTooltip
+    id="close-icon-tooltip"
     key="previewArrowLeft"
-    overlay={
-      <Tooltip
-        id="close-icon-tooltip"
-      >
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Close"
-          id="generic.close"
-        />
-      </Tooltip>
-    }
     placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
+    title={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Close"
+        id="generic.close"
+      />
     }
   >
     <button
@@ -35,7 +24,7 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
         className="icon icon-chevron-left"
       />
     </button>
-  </OverlayTrigger>
+  </WithTooltip>
   <span
     className="modal-bar-file-count"
   >
@@ -50,26 +39,15 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
       }
     />
   </span>
-  <OverlayTrigger
-    defaultOverlayShown={false}
-    delayShow={400}
+  <WithTooltip
+    id="close-icon-tooltip"
     key="publicLink"
-    overlay={
-      <Tooltip
-        id="close-icon-tooltip"
-      >
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Next"
-          id="generic.next"
-        />
-      </Tooltip>
-    }
     placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
+    title={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Next"
+        id="generic.next"
+      />
     }
   >
     <button
@@ -81,6 +59,6 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
         className="icon icon-chevron-right"
       />
     </button>
-  </OverlayTrigger>
+  </WithTooltip>
 </div>
 `;
diff --git a/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/file_preview_modal_main_nav.tsx b/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/file_preview_modal_main_nav.tsx
index 7f94cb2569..4315699ccb 100644
--- a/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/file_preview_modal_main_nav.tsx
+++ b/webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/file_preview_modal_main_nav.tsx
@@ -6,10 +6,7 @@ import {FormattedMessage} from 'react-intl';
 
 import './file_preview_modal_main_nav.scss';
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
-
-import Constants from 'utils/constants';
+import WithTooltip from 'components/with_tooltip';
 
 interface Props {
     fileIndex: number;
@@ -20,18 +17,16 @@ interface Props {
 
 const FilePreviewModalMainNav: React.FC<Props> = (props: Props) => {
     const leftArrow = (
-        <OverlayTrigger
-            delayShow={Constants.OVERLAY_TIME_DELAY}
+        <WithTooltip
             key='previewArrowLeft'
-            placement='bottom'
-            overlay={
-                <Tooltip id='close-icon-tooltip'>
-                    <FormattedMessage
-                        id='generic.close'
-                        defaultMessage='Close'
-                    />
-                </Tooltip>
+            id='close-icon-tooltip'
+            title={
+                <FormattedMessage
+                    id='generic.close'
+                    defaultMessage='Close'
+                />
             }
+            placement='bottom'
         >
             <button
                 id='previewArrowLeft'
@@ -40,22 +35,20 @@ const FilePreviewModalMainNav: React.FC<Props> = (props: Props) => {
             >
                 <i className='icon icon-chevron-left'/>
             </button>
-        </OverlayTrigger>
+        </WithTooltip>
     );
 
     const rightArrow = (
-        <OverlayTrigger
-            delayShow={Constants.OVERLAY_TIME_DELAY}
+        <WithTooltip
             key='publicLink'
-            placement='bottom'
-            overlay={
-                <Tooltip id='close-icon-tooltip'>
-                    <FormattedMessage
-                        id='generic.next'
-                        defaultMessage='Next'
-                    />
-                </Tooltip>
+            id='close-icon-tooltip'
+            title={
+                <FormattedMessage
+                    id='generic.next'
+                    defaultMessage='Next'
+                />
             }
+            placement='bottom'
         >
             <button
                 id='previewArrowRight'
@@ -64,7 +57,7 @@ const FilePreviewModalMainNav: React.FC<Props> = (props: Props) => {
             >
                 <i className='icon icon-chevron-right'/>
             </button>
-        </OverlayTrigger>
+        </WithTooltip>
     );
     return (
         <div className='file_preview_modal_main_nav'>