From 9bf07437cf05f177e52ab745203ae2b21d16bfd3 Mon Sep 17 00:00:00 2001
From: Brandon Shen <83319404+BrandonS09@users.noreply.github.com>
Date: Wed, 19 Jun 2024 02:39:25 -0700
Subject: [PATCH] [MM-58513] Migrate tooltips of
 "components/channel_info_rhs/header.tsx" to WithTooltip (#27240)

---
 .../components/channel_info_rhs/header.tsx    | 26 +++++++------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/webapp/channels/src/components/channel_info_rhs/header.tsx b/webapp/channels/src/components/channel_info_rhs/header.tsx
index 52202b04b3..1ef6b080a3 100644
--- a/webapp/channels/src/components/channel_info_rhs/header.tsx
+++ b/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>
     );
 };