[MM-58409] Migrate tooltips of 'components/file_preview_modal/popover_bar/popover_bar' to WithTooltip (#27447)

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
+    <WithTooltip
-      defaultOverlayShown={false}
-      delayShow={400}
-      key="zoomOut"
-      overlay={
-        <Tooltip
       id="zoom-out-icon-tooltip"
-        >
+      key="zoomOut"
+      placement="top"
+      title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Zoom Out"
           id="view_image.zoom_out"
         />
-        </Tooltip>
-      }
-      placement="top"
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
       }
     >
       <span
@@ -37,27 +26,16 @@ exports[`components/file_preview_modal/popover_bar/PopoverBar should match snaps
           className="icon icon-minus"
         />
       </span>
-    </OverlayTrigger>
+    </WithTooltip>
-    <OverlayTrigger
+    <WithTooltip
-      defaultOverlayShown={false}
-      delayShow={400}
-      key="zoomReset"
-      overlay={
-        <Tooltip
       id="zoom-reset-icon-tooltip"
-        >
+      key="zoomReset"
+      placement="top"
+      title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Reset Zoom"
           id="view_image.zoom_reset"
         />
-        </Tooltip>
-      }
-      placement="top"
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
       }
     >
       <span
@@ -67,27 +45,16 @@ exports[`components/file_preview_modal/popover_bar/PopoverBar should match snaps
           className="icon icon-magnify-minus"
         />
       </span>
-    </OverlayTrigger>
+    </WithTooltip>
-    <OverlayTrigger
+    <WithTooltip
-      defaultOverlayShown={false}
-      delayShow={400}
-      key="zoomIn"
-      overlay={
-        <Tooltip
       id="zoom-in-icon-tooltip"
-        >
+      key="zoomIn"
+      placement="top"
+      title={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Zoom In"
           id="view_image.zoom_in"
         />
-        </Tooltip>
-      }
-      placement="top"
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
       }
     >
       <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>
 `;

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 WithTooltip from 'components/with_tooltip';
-import Tooltip from 'components/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
+                <WithTooltip
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
                     key='zoomOut'
-                    placement='top'
+                    id='zoom-out-icon-tooltip'
-                    overlay={
+                    title={
-                        <Tooltip id='zoom-out-icon-tooltip'>
                         <FormattedMessage
                             id='view_image.zoom_out'
                             defaultMessage='Zoom Out'
                         />
-                        </Tooltip>
                     }
+                    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
+                <WithTooltip
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
                     key='zoomReset'
-                    placement='top'
+                    id='zoom-reset-icon-tooltip'
-                    overlay={
+                    title={
-                        <Tooltip id='zoom-reset-icon-tooltip'>
                         <FormattedMessage
                             id='view_image.zoom_reset'
                             defaultMessage='Reset Zoom'
                         />
-                        </Tooltip>
                     }
+                    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
+                <WithTooltip
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
                     key='zoomIn'
-                    placement='top'
+                    id='zoom-in-icon-tooltip'
-                    overlay={
+                    title={
-                        <Tooltip id='zoom-in-icon-tooltip'>
                         <FormattedMessage
                             id='view_image.zoom_in'
                             defaultMessage='Zoom In'
                         />
-                        </Tooltip>
                     }
+                    placement='top'
                 >
                     {zoomInButton}
-                </OverlayTrigger>,
+                </WithTooltip>,
             );
 
             wrappedZoomControls = (