[MM-58511] Migrate tooltips of "components/global_header/center_controls/user_guide_dropdown/user_guide_dropdown.tsx" to WithTooltip (#27245)

webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap

@@ -7,26 +7,14 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
   id="helpMenuPortal"
   onToggle={[Function]}
 >
-  <OverlayTrigger
+  <WithTooltip
-    defaultOverlayShown={false}
+    id="userGuideHelpTooltip"
-    delayShow={500}
-    overlay={
-      <Tooltip
-        className="hidden-xs"
-        id="userGuideHelpTooltip"
-      >
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Help"
-          id="channel_header.userHelpGuide"
-        />
-      </Tooltip>
-    }
     placement="bottom"
-    trigger={
+    title={
-      Array [
+      <Memo(MemoizedFormattedMessage)
-        "hover",
+        defaultMessage="Help"
-        "focus",
+        id="channel_header.userHelpGuide"
-      ]
+      />
     }
   >
     <ForwardRef
@@ -40,7 +28,7 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
       onClick={[Function]}
       size="sm"
     />
-  </OverlayTrigger>
+  </WithTooltip>
   <Menu
     ariaLabel="Add Channel Dropdown"
     id="AddChannelDropdown"
@@ -96,26 +84,14 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
   id="helpMenuPortal"
   onToggle={[Function]}
 >
-  <OverlayTrigger
+  <WithTooltip
-    defaultOverlayShown={false}
+    id="userGuideHelpTooltip"
-    delayShow={500}
-    overlay={
-      <Tooltip
-        className="hidden-xs"
-        id="userGuideHelpTooltip"
-      >
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Help"
-          id="channel_header.userHelpGuide"
-        />
-      </Tooltip>
-    }
     placement="bottom"
-    trigger={
+    title={
-      Array [
+      <Memo(MemoizedFormattedMessage)
-        "hover",
+        defaultMessage="Help"
-        "focus",
+        id="channel_header.userHelpGuide"
-      ]
+      />
     }
   >
     <ForwardRef
@@ -129,7 +105,7 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
       onClick={[Function]}
       size="sm"
     />
-  </OverlayTrigger>
+  </WithTooltip>
   <Menu
     ariaLabel="Add Channel Dropdown"
     id="AddChannelDropdown"
@@ -177,26 +153,14 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
   id="helpMenuPortal"
   onToggle={[Function]}
 >
-  <OverlayTrigger
+  <WithTooltip
-    defaultOverlayShown={false}
+    id="userGuideHelpTooltip"
-    delayShow={500}
-    overlay={
-      <Tooltip
-        className="hidden-xs"
-        id="userGuideHelpTooltip"
-      >
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Help"
-          id="channel_header.userHelpGuide"
-        />
-      </Tooltip>
-    }
     placement="bottom"
-    trigger={
+    title={
-      Array [
+      <Memo(MemoizedFormattedMessage)
-        "hover",
+        defaultMessage="Help"
-        "focus",
+        id="channel_header.userHelpGuide"
-      ]
+      />
     }
   >
     <ForwardRef
@@ -210,7 +174,7 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
       onClick={[Function]}
       size="sm"
     />
-  </OverlayTrigger>
+  </WithTooltip>
   <Menu
     ariaLabel="Add Channel Dropdown"
     id="AddChannelDropdown"

webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/user_guide_dropdown.tsx

@@ -10,10 +10,9 @@ import IconButton from '@mattermost/compass-components/components/icon-button';
 import {trackEvent} from 'actions/telemetry_actions';
 
 import KeyboardShortcutsModal from 'components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import Menu from 'components/widgets/menu/menu';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
+import WithTooltip from 'components/with_tooltip';
 
 import {ModalIdentifiers} from 'utils/constants';
 
@@ -123,16 +122,11 @@ class UserGuideDropdown extends React.PureComponent<Props, State> {
 
     render() {
         const {intl} = this.props;
-        const tooltip = (
+        const tooltipText = (
-            <Tooltip
+            <FormattedMessage
-                id='userGuideHelpTooltip'
+                id={'channel_header.userHelpGuide'}
-                className='hidden-xs'
+                defaultMessage='Help'
-            >
+            />
-                <FormattedMessage
-                    id={'channel_header.userHelpGuide'}
-                    defaultMessage='Help'
-                />
-            </Tooltip>
         );
 
         return (
@@ -141,10 +135,10 @@ class UserGuideDropdown extends React.PureComponent<Props, State> {
                 className='userGuideHelp'
                 onToggle={this.buttonToggleState}
             >
-                <OverlayTrigger
+                <WithTooltip
-                    delayShow={500}
+                    id='userGuideHelpTooltip'
                     placement='bottom'
-                    overlay={this.state.buttonActive ? <></> : tooltip}
+                    title={tooltipText}
                 >
                     <IconButton
                         size={'sm'}
@@ -157,7 +151,7 @@ class UserGuideDropdown extends React.PureComponent<Props, State> {
                         aria-expanded={this.state.buttonActive}
                         aria-label={intl.formatMessage({id: 'channel_header.userHelpGuide', defaultMessage: 'Help'})}
                     />
-                </OverlayTrigger>
+                </WithTooltip>
                 <Menu
                     openLeft={false}
                     openUp={false}