[MM-59895] Migrate tooltips of 'components/channel_header/channel_header.tsx' to WithTooltip (#27841)

webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap

@@ -1769,25 +1769,14 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
           <div
             className="channel-header__icons"
           >
-            <OverlayTrigger
+            <WithTooltip
-              defaultOverlayShown={false}
-              delayShow={400}
-              overlay={
-                <Tooltip
               id="channelMutedTooltip"
-                >
+              placement="bottom"
+              title={
                 <Memo(MemoizedFormattedMessage)
                   defaultMessage="Unmute"
                   id="channelHeader.unmute"
                 />
-                </Tooltip>
-              }
-              placement="bottom"
-              trigger={
-                Array [
-                  "hover",
-                  "focus",
-                ]
               }
             >
               <button
@@ -1800,7 +1789,7 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
                   className="icon icon-bell-off-outline"
                 />
               </button>
-            </OverlayTrigger>
+            </WithTooltip>
             <HeaderIconWrapper
               buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
               buttonId="member_rhs"

webapp/channels/src/components/channel_header/channel_header.tsx

@@ -18,12 +18,11 @@ import CustomStatusEmoji from 'components/custom_status/custom_status_emoji';
 import CustomStatusText from 'components/custom_status/custom_status_text';
 import EditChannelHeaderModal from 'components/edit_channel_header_modal';
 import Markdown from 'components/markdown';
-import OverlayTrigger from 'components/overlay_trigger';
 import type {BaseOverlayTrigger} from 'components/overlay_trigger';
 import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
 import Timestamp from 'components/timestamp';
-import Tooltip from 'components/tooltip';
 import Popover from 'components/widgets/popover';
+import WithTooltip from 'components/with_tooltip';
 
 import CallButton from 'plugins/call_button';
 import ChannelHeaderPlug from 'plugins/channel_header_plug';
@@ -547,22 +546,18 @@ class ChannelHeader extends React.PureComponent<Props, State> {
             );
         }
 
-        const channelMutedTooltip = (
+        let muteTrigger;
-            <Tooltip id='channelMutedTooltip'>
+        if (channelMuted) {
+            muteTrigger = (
+                <WithTooltip
+                    id='channelMutedTooltip'
+                    placement='bottom'
+                    title={
                         <FormattedMessage
                             id='channelHeader.unmute'
                             defaultMessage='Unmute'
                         />
-            </Tooltip>
+                    }
-        );
-
-        let muteTrigger;
-        if (channelMuted) {
-            muteTrigger = (
-                <OverlayTrigger
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                    placement='bottom'
-                    overlay={channelMutedTooltip}
                 >
                     <button
                         id='toggleMute'
@@ -572,7 +567,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                     >
                         <i className={'icon icon-bell-off-outline'}/>
                     </button>
-                </OverlayTrigger>
+                </WithTooltip>
             );
         }