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

---
 .../components/channel_members_rhs/header.tsx | 27 +++++++------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/webapp/channels/src/components/channel_members_rhs/header.tsx b/webapp/channels/src/components/channel_members_rhs/header.tsx
index b9e75ae027..d62eac99a1 100644
--- a/webapp/channels/src/components/channel_members_rhs/header.tsx
+++ b/webapp/channels/src/components/channel_members_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;
@@ -27,15 +24,6 @@ const HeaderTitle = styled.span`
 const Header = ({channel, canGoBack, onClose, goBack}: Props) => {
     const {formatMessage} = useIntl();
 
-    const closeSidebarTooltip = (
-        <Tooltip id='closeSidebarTooltip'>
-            <FormattedMessage
-                id='rhs_header.closeSidebarTooltip'
-                defaultMessage='Close'
-            />
-        </Tooltip>
-    );
-
     return (
         <div className='sidebar--right__header'>
             <span className='sidebar--right__title'>
@@ -68,10 +56,15 @@ const Header = ({channel, canGoBack, onClose, goBack}: 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'
@@ -84,7 +77,7 @@ const Header = ({channel, canGoBack, onClose, goBack}: Props) => {
                         className='icon icon-close'
                     />
                 </button>
-            </OverlayTrigger>
+            </WithTooltip>
         </div>
     );
 };