[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}
+              id="channelMutedTooltip"
-              delayShow={400}
-              overlay={
-                <Tooltip
-                  id="channelMutedTooltip"
-                >
-                  <Memo(MemoizedFormattedMessage)
-                    defaultMessage="Unmute"
-                    id="channelHeader.unmute"
-                  />
-                </Tooltip>
-              }
               placement="bottom"
-              trigger={
+              title={
-                Array [
+                <Memo(MemoizedFormattedMessage)
-                  "hover",
+                  defaultMessage="Unmute"
-                  "focus",
+                  id="channelHeader.unmute"
-                ]
+                />
               }
             >
               <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 = (
-            <Tooltip id='channelMutedTooltip'>
-                <FormattedMessage
-                    id='channelHeader.unmute'
-                    defaultMessage='Unmute'
-                />
-            </Tooltip>
-        );
-
         let muteTrigger;
         if (channelMuted) {
             muteTrigger = (
-                <OverlayTrigger
+                <WithTooltip
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    id='channelMutedTooltip'
                     placement='bottom'
-                    overlay={channelMutedTooltip}
+                    title={
+                        <FormattedMessage
+                            id='channelHeader.unmute'
+                            defaultMessage='Unmute'
+                        />
+                    }
                 >
                     <button
                         id='toggleMute'
@@ -572,7 +567,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                     >
                         <i className={'icon icon-bell-off-outline'}/>
                     </button>
-                </OverlayTrigger>
+                </WithTooltip>
             );
         }