diff --git a/webapp/channels/src/components/search/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap b/webapp/channels/src/components/search/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
index e528c330ce..3eba106bc1 100644
--- a/webapp/channels/src/components/search/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
+++ b/webapp/channels/src/components/search/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
@@ -6,26 +6,14 @@ exports[`UserGuideDropdown should match snapshot 1`] = `
   className="userGuideHelp"
   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"
+      />
     }
   >
     <button
@@ -38,7 +26,7 @@ exports[`UserGuideDropdown should match snapshot 1`] = `
         className="icon"
       />
     </button>
-  </OverlayTrigger>
+  </WithTooltip>
   <Menu
     ariaLabel="Add Channel Dropdown"
     id="AddChannelDropdown"
@@ -82,26 +70,14 @@ exports[`UserGuideDropdown should match snapshot for false of enableAskCommunity
   className="userGuideHelp"
   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"
+      />
     }
   >
     <button
@@ -114,7 +90,7 @@ exports[`UserGuideDropdown should match snapshot for false of enableAskCommunity
         className="icon"
       />
     </button>
-  </OverlayTrigger>
+  </WithTooltip>
   <Menu
     ariaLabel="Add Channel Dropdown"
     id="AddChannelDropdown"
diff --git a/webapp/channels/src/components/search/user_guide_dropdown/user_guide_dropdown.tsx b/webapp/channels/src/components/search/user_guide_dropdown/user_guide_dropdown.tsx
index 957ce8c3fc..edbbb8d371 100644
--- a/webapp/channels/src/components/search/user_guide_dropdown/user_guide_dropdown.tsx
+++ b/webapp/channels/src/components/search/user_guide_dropdown/user_guide_dropdown.tsx
@@ -9,11 +9,10 @@ import type {WrappedComponentProps} from 'react-intl';
 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 UserGuideIcon from 'components/widgets/icons/user_guide_icon';
 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';
 
@@ -87,16 +86,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 (
@@ -104,10 +98,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={this.state.buttonActive ? '' : tooltipText}
                 >
                     <button
                         id='channelHeaderUserGuideButton'
@@ -117,7 +111,7 @@ class UserGuideDropdown extends React.PureComponent<Props, State> {
                     >
                         <UserGuideIcon className='icon'/>
                     </button>
-                </OverlayTrigger>
+                </WithTooltip>
                 <Menu
                     openLeft={true}
                     openUp={false}