diff --git a/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap b/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
index 76ab308d4f..d356f8c5f7 100644
--- a/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
+++ b/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
-    defaultOverlayShown={false}
-    delayShow={500}
-    overlay={
-      <Tooltip
-        className="hidden-xs"
-        id="userGuideHelpTooltip"
-      >
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Help"
-          id="channel_header.userHelpGuide"
-        />
-      </Tooltip>
-    }
+  <WithTooltip
+    id="userGuideHelpTooltip"
     placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
+    title={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Help"
+        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
-    defaultOverlayShown={false}
-    delayShow={500}
-    overlay={
-      <Tooltip
-        className="hidden-xs"
-        id="userGuideHelpTooltip"
-      >
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Help"
-          id="channel_header.userHelpGuide"
-        />
-      </Tooltip>
-    }
+  <WithTooltip
+    id="userGuideHelpTooltip"
     placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
+    title={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Help"
+        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
-    defaultOverlayShown={false}
-    delayShow={500}
-    overlay={
-      <Tooltip
-        className="hidden-xs"
-        id="userGuideHelpTooltip"
-      >
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Help"
-          id="channel_header.userHelpGuide"
-        />
-      </Tooltip>
-    }
+  <WithTooltip
+    id="userGuideHelpTooltip"
     placement="bottom"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
+    title={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Help"
+        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"
diff --git a/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/user_guide_dropdown.tsx b/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/user_guide_dropdown.tsx
index aea91ddc30..a526e614d7 100644
--- a/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/user_guide_dropdown.tsx
+++ b/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 = (
-            <Tooltip
-                id='userGuideHelpTooltip'
-                className='hidden-xs'
-            >
-                <FormattedMessage
-                    id={'channel_header.userHelpGuide'}
-                    defaultMessage='Help'
-                />
-            </Tooltip>
+        const tooltipText = (
+            <FormattedMessage
+                id={'channel_header.userHelpGuide'}
+                defaultMessage='Help'
+            />
         );
 
         return (
@@ -141,10 +135,10 @@ class UserGuideDropdown extends React.PureComponent<Props, State> {
                 className='userGuideHelp'
                 onToggle={this.buttonToggleState}
             >
-                <OverlayTrigger
-                    delayShow={500}
+                <WithTooltip
+                    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}