[MM-58513] Migrate tooltips of "components/channel_info_rhs/header.tsx" to WithTooltip (#27240)

webapp/channels/src/components/channel_info_rhs/header.tsx

@@ -7,10 +7,7 @@ import styled from 'styled-components';
 
 import type {Channel} from '@mattermost/types/channels';
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
-
-import Constants from 'utils/constants';
+import WithTooltip from 'components/with_tooltip';
 
 interface Props {
     channel: Channel;
@@ -29,14 +26,6 @@ const HeaderTitle = styled.span`
 
 const Header = ({channel, isArchived, isMobile, onClose}: Props) => {
     const {formatMessage} = useIntl();
-    const closeSidebarTooltip = (
-        <Tooltip id='closeSidebarTooltip'>
-            <FormattedMessage
-                id='rhs_header.closeSidebarTooltip'
-                defaultMessage='Close'
-            />
-        </Tooltip>
-    );
 
     return (
         <div className='sidebar--right__header'>
@@ -69,10 +58,15 @@ const Header = ({channel, isArchived, isMobile, onClose}: Props) => {
                 }
             </span>
 
-            <OverlayTrigger
-                delayShow={Constants.OVERLAY_TIME_DELAY}
+            <WithTooltip
+                id='closeSidebarTooltip'
                 placement='top'
-                overlay={closeSidebarTooltip}
+                title={
+                    <FormattedMessage
+                        id='rhs_header.closeSidebarTooltip'
+                        defaultMessage='Close'
+                    />
+                }
             >
                 <button
                     id='rhsCloseButton'
@@ -85,7 +79,7 @@ const Header = ({channel, isArchived, isMobile, onClose}: Props) => {
                         className='icon icon-close'
                     />
                 </button>
-            </OverlayTrigger>
+            </WithTooltip>
         </div>
     );
 };