diff --git a/webapp/channels/src/components/file_preview_modal/popover_bar/__snapshots__/popover_bar.test.tsx.snap b/webapp/channels/src/components/file_preview_modal/popover_bar/__snapshots__/popover_bar.test.tsx.snap
index e3c4eae801..7c7191447a 100644
--- a/webapp/channels/src/components/file_preview_modal/popover_bar/__snapshots__/popover_bar.test.tsx.snap
+++ b/webapp/channels/src/components/file_preview_modal/popover_bar/__snapshots__/popover_bar.test.tsx.snap
@@ -8,26 +8,15 @@ exports[`components/file_preview_modal/popover_bar/PopoverBar should match snaps
   <div
     className="modal-column"
   >
-    <OverlayTrigger
-      defaultOverlayShown={false}
-      delayShow={400}
+    <WithTooltip
+      id="zoom-out-icon-tooltip"
       key="zoomOut"
-      overlay={
-        <Tooltip
-          id="zoom-out-icon-tooltip"
-        >
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Zoom Out"
-            id="view_image.zoom_out"
-          />
-        </Tooltip>
-      }
       placement="top"
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
+      title={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Zoom Out"
+          id="view_image.zoom_out"
+        />
       }
     >
       <span
@@ -37,27 +26,16 @@ exports[`components/file_preview_modal/popover_bar/PopoverBar should match snaps
           className="icon icon-minus"
         />
       </span>
-    </OverlayTrigger>
-    <OverlayTrigger
-      defaultOverlayShown={false}
-      delayShow={400}
+    </WithTooltip>
+    <WithTooltip
+      id="zoom-reset-icon-tooltip"
       key="zoomReset"
-      overlay={
-        <Tooltip
-          id="zoom-reset-icon-tooltip"
-        >
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Reset Zoom"
-            id="view_image.zoom_reset"
-          />
-        </Tooltip>
-      }
       placement="top"
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
+      title={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Reset Zoom"
+          id="view_image.zoom_reset"
+        />
       }
     >
       <span
@@ -67,27 +45,16 @@ exports[`components/file_preview_modal/popover_bar/PopoverBar should match snaps
           className="icon icon-magnify-minus"
         />
       </span>
-    </OverlayTrigger>
-    <OverlayTrigger
-      defaultOverlayShown={false}
-      delayShow={400}
+    </WithTooltip>
+    <WithTooltip
+      id="zoom-in-icon-tooltip"
       key="zoomIn"
-      overlay={
-        <Tooltip
-          id="zoom-in-icon-tooltip"
-        >
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Zoom In"
-            id="view_image.zoom_in"
-          />
-        </Tooltip>
-      }
       placement="top"
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
+      title={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Zoom In"
+          id="view_image.zoom_in"
+        />
       }
     >
       <span
@@ -97,7 +64,7 @@ exports[`components/file_preview_modal/popover_bar/PopoverBar should match snaps
           className="icon icon-plus"
         />
       </span>
-    </OverlayTrigger>
+    </WithTooltip>
   </div>
 </div>
 `;
diff --git a/webapp/channels/src/components/file_preview_modal/popover_bar/popover_bar.tsx b/webapp/channels/src/components/file_preview_modal/popover_bar/popover_bar.tsx
index c0a617241a..c207c91848 100644
--- a/webapp/channels/src/components/file_preview_modal/popover_bar/popover_bar.tsx
+++ b/webapp/channels/src/components/file_preview_modal/popover_bar/popover_bar.tsx
@@ -5,10 +5,9 @@ import debounce from 'lodash/debounce';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
 
-import {Constants, ZoomSettings} from 'utils/constants';
+import {ZoomSettings} from 'utils/constants';
 
 export interface Props {
     scale?: number;
@@ -43,21 +42,19 @@ export default class PopoverBar extends React.PureComponent<Props> {
                 );
             }
             zoomControls.push(
-                <OverlayTrigger
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                <WithTooltip
                     key='zoomOut'
-                    placement='top'
-                    overlay={
-                        <Tooltip id='zoom-out-icon-tooltip'>
-                            <FormattedMessage
-                                id='view_image.zoom_out'
-                                defaultMessage='Zoom Out'
-                            />
-                        </Tooltip>
+                    id='zoom-out-icon-tooltip'
+                    title={
+                        <FormattedMessage
+                            id='view_image.zoom_out'
+                            defaultMessage='Zoom Out'
+                        />
                     }
+                    placement='top'
                 >
                     {zoomOutButton}
-                </OverlayTrigger>,
+                </WithTooltip>,
             );
 
             if (this.props.scale && this.props.scale > ZoomSettings.DEFAULT_SCALE) {
@@ -84,21 +81,19 @@ export default class PopoverBar extends React.PureComponent<Props> {
                 );
             }
             zoomControls.push(
-                <OverlayTrigger
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                <WithTooltip
                     key='zoomReset'
-                    placement='top'
-                    overlay={
-                        <Tooltip id='zoom-reset-icon-tooltip'>
-                            <FormattedMessage
-                                id='view_image.zoom_reset'
-                                defaultMessage='Reset Zoom'
-                            />
-                        </Tooltip>
+                    id='zoom-reset-icon-tooltip'
+                    title={
+                        <FormattedMessage
+                            id='view_image.zoom_reset'
+                            defaultMessage='Reset Zoom'
+                        />
                     }
+                    placement='top'
                 >
                     {zoomResetButton}
-                </OverlayTrigger>,
+                </WithTooltip>,
             );
 
             if (this.props.scale && this.props.scale < ZoomSettings.MAX_SCALE) {
@@ -118,21 +113,19 @@ export default class PopoverBar extends React.PureComponent<Props> {
                 );
             }
             zoomControls.push(
-                <OverlayTrigger
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                <WithTooltip
                     key='zoomIn'
-                    placement='top'
-                    overlay={
-                        <Tooltip id='zoom-in-icon-tooltip'>
-                            <FormattedMessage
-                                id='view_image.zoom_in'
-                                defaultMessage='Zoom In'
-                            />
-                        </Tooltip>
+                    id='zoom-in-icon-tooltip'
+                    title={
+                        <FormattedMessage
+                            id='view_image.zoom_in'
+                            defaultMessage='Zoom In'
+                        />
                     }
+                    placement='top'
                 >
                     {zoomInButton}
-                </OverlayTrigger>,
+                </WithTooltip>,
             );
 
             wrappedZoomControls = (