[MM-59334] Migrate tooltips of "components/sidebar/sidebar_header/sidebar_header.tsx" to WithTooltip (#27635)

webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx

@@ -17,14 +17,11 @@ import {isAddChannelDropdownOpen} from 'selectors/views/add_channel_dropdown';
 import useGetUsageDeltas from 'components/common/hooks/useGetUsageDeltas';
 import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
 import MainMenu from 'components/main_menu';
-import OverlayTrigger from 'components/overlay_trigger';
 import AddChannelDropdown from 'components/sidebar/add_channel_dropdown';
-import Tooltip from 'components/tooltip';
 import {OnboardingTourSteps} from 'components/tours';
 import {useShowOnboardingTutorialStep} from 'components/tours/onboarding_tour';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
-
+import WithTooltip from 'components/with_tooltip';
-import Constants from 'utils/constants';
 
 import type {GlobalState} from 'types/store';
 
@@ -123,18 +120,15 @@ const SidebarHeader = (props: Props) => {
         <CompassThemeProvider theme={theme}>
             <SidebarHeaderContainer
                 id={'sidebar-header-container'}
-            >
-                <OverlayTrigger
-
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                    placement='bottom'
-                    overlay={currentTeam.description?.length ? (
-                        <Tooltip id='team-name__tooltip'>{currentTeam.description}</Tooltip>
-                    ) : <></>}
             >
                 <MenuWrapper
                     onToggle={handleMenuToggle}
                     className='SidebarHeaderMenuWrapper test-team-header'
+                >
+                    <WithTooltip
+                        id='team-name__tooltip'
+                        title={currentTeam.description ? currentTeam.description : currentTeam.display_name}
+                        placement='bottom'
                     >
                         <SidebarHeading>
                             <button className='style--none sidebar-header'>
@@ -142,12 +136,12 @@ const SidebarHeader = (props: Props) => {
                                 <i className='icon icon-chevron-down'/>
                             </button>
                         </SidebarHeading>
+                    </WithTooltip>
                     <MainMenu
                         id='sidebarDropdownMenu'
                         usageDeltaTeams={usageDeltas.teams.active}
                     />
                 </MenuWrapper>
-                </OverlayTrigger>
                 <AddChannelDropdown
                     showNewChannelModal={props.showNewChannelModal}
                     showMoreChannelsModal={props.showMoreChannelsModal}