[MM-60167] Migrate tooltips of "components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx" to WithTooltip (#27979)

webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/__snapshots__/sidebar_channel_link.test.tsx.snap

@@ -180,31 +180,17 @@ exports[`components/sidebar/sidebar_channel/sidebar_channel_link should match sn
   <div
     className="SidebarChannelLinkLabel_wrapper"
   >
-    <OverlayTrigger
+    <WithTooltip
-      defaultOverlayShown={false}
+      id="channel-displayname__tooltip"
-      delayShow={400}
-      onEntering={[Function]}
-      overlay={
-        <Tooltip
-          id="channel-displayname__tooltip"
-        >
-          channel_label
-        </Tooltip>
-      }
       placement="top"
-      trigger={
+      title="channel_label"
-        Array [
-          "hover",
-          "focus",
-        ]
-      }
     >
       <span
         className="SidebarChannelLinkLabel"
       >
         channel_label
       </span>
-    </OverlayTrigger>
+    </WithTooltip>
     <Connect(Pluggable)
       channel={
         Object {

webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx

@@ -10,9 +10,8 @@ import type {Channel} from '@mattermost/types/channels';
 import {mark, trackEvent} from 'actions/telemetry_actions';
 
 import CustomStatusEmoji from 'components/custom_status/custom_status_emoji';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import {ChannelsAndDirectMessagesTour} from 'components/tours/onboarding_tour';
+import WithTooltip from 'components/with_tooltip';
 
 import Pluggable from 'plugins/pluggable';
 import Constants, {RHSStates} from 'utils/constants';
@@ -130,9 +129,6 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
         return ariaLabel.toLowerCase();
     };
 
-    // Bootstrap adds the attr dynamically, removing it to prevent a11y readout
-    removeTooltipLink = (): void => this.labelRef.current?.removeAttribute?.('aria-describedby');
-
     handleChannelClick = (event: React.MouseEvent<HTMLAnchorElement>): void => {
         mark(Mark.ChannelLinkClicked);
         this.handleSelectChannel(event);
@@ -201,20 +197,14 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
             </span>
         );
         if (this.state.showTooltip) {
-            const displayNameToolTip = (
-                <Tooltip id='channel-displayname__tooltip'>
-                    {label}
-                </Tooltip>
-            );
             labelElement = (
-                <OverlayTrigger
+                <WithTooltip
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    id='channel-displayname__tooltip'
-                    placement='top'
+                    title={label}
-                    overlay={displayNameToolTip}
+                    placement={'top'}
-                    onEntering={this.removeTooltipLink}
                 >
                     {labelElement}
-                </OverlayTrigger>
+                </WithTooltip>
             );
         }