diff --git a/webapp/channels/src/components/sidebar/sidebar_category/__snapshots__/sidebar_category.test.tsx.snap b/webapp/channels/src/components/sidebar/sidebar_category/__snapshots__/sidebar_category.test.tsx.snap
index 65a4b37619..cecbbb459e 100644
--- a/webapp/channels/src/components/sidebar/sidebar_category/__snapshots__/sidebar_category.test.tsx.snap
+++ b/webapp/channels/src/components/sidebar/sidebar_category/__snapshots__/sidebar_category.test.tsx.snap
@@ -297,14 +297,11 @@ exports[`components/sidebar/sidebar_category should match snapshot when sorting
       }
       handleOpenDirectMessagesModal={[Function]}
     />
-    <OverlayTrigger
-      defaultOverlayShown={false}
-      delayShow={500}
-      overlay={
-        <Tooltip
-          className="hidden-xs"
-          id="new-group-tooltip"
-        >
+    <WithTooltip
+      id="new-group-tooltip"
+      placement="top"
+      title={
+        <React.Fragment>
           Create new direct message
           <Memo(KeyboardShortcutSequence)
             hideDescription={true}
@@ -322,14 +319,7 @@ exports[`components/sidebar/sidebar_category should match snapshot when sorting
               }
             }
           />
-        </Tooltip>
-      }
-      placement="top"
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
+        </React.Fragment>
       }
     >
       <button
@@ -341,7 +331,7 @@ exports[`components/sidebar/sidebar_category should match snapshot when sorting
           className="icon-plus"
         />
       </button>
-    </OverlayTrigger>
+    </WithTooltip>
   </SidebarCategoryHeader>
   <div
     className="SidebarChannelGroup_content"
@@ -420,14 +410,11 @@ exports[`components/sidebar/sidebar_category should match snapshot when the cate
       }
       handleOpenDirectMessagesModal={[Function]}
     />
-    <OverlayTrigger
-      defaultOverlayShown={false}
-      delayShow={500}
-      overlay={
-        <Tooltip
-          className="hidden-xs"
-          id="new-group-tooltip"
-        >
+    <WithTooltip
+      id="new-group-tooltip"
+      placement="top"
+      title={
+        <React.Fragment>
           Create new direct message
           <Memo(KeyboardShortcutSequence)
             hideDescription={true}
@@ -445,14 +432,7 @@ exports[`components/sidebar/sidebar_category should match snapshot when the cate
               }
             }
           />
-        </Tooltip>
-      }
-      placement="top"
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
+        </React.Fragment>
       }
     >
       <button
@@ -464,7 +444,7 @@ exports[`components/sidebar/sidebar_category should match snapshot when the cate
           className="icon-plus"
         />
       </button>
-    </OverlayTrigger>
+    </WithTooltip>
   </SidebarCategoryHeader>
   <div
     className="SidebarChannelGroup_content"
diff --git a/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category.tsx b/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category.tsx
index 1aaae234ef..bd972c791d 100644
--- a/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category.tsx
+++ b/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category.tsx
@@ -19,8 +19,7 @@ import {trackEvent} from 'actions/telemetry_actions';
 import KeyboardShortcutSequence, {
     KEYBOARD_SHORTCUTS,
 } from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
 
 import Constants, {A11yCustomEventTypes, DraggingStateTypes, DraggingStates} from 'utils/constants';
 import {isKeyPressed} from 'utils/keyboard';
@@ -270,30 +269,25 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
         } else if (category.type === CategoryTypes.DIRECT_MESSAGES) {
             const addHelpLabel = localizeMessage('sidebar.createDirectMessage', 'Create new direct message');
 
-            const addTooltip = (
-                <Tooltip
-                    id='new-group-tooltip'
-                    className='hidden-xs'
-                >
-                    {addHelpLabel}
-                    <KeyboardShortcutSequence
-                        shortcut={KEYBOARD_SHORTCUTS.navDMMenu}
-                        hideDescription={true}
-                        isInsideTooltip={true}
-                    />
-                </Tooltip>
-            );
-
             categoryMenu = (
                 <React.Fragment>
                     <SidebarCategorySortingMenu
                         category={category}
                         handleOpenDirectMessagesModal={this.handleOpenDirectMessagesModal}
                     />
-                    <OverlayTrigger
-                        delayShow={500}
+                    <WithTooltip
+                        id='new-group-tooltip'
+                        title={
+                            <>
+                                {addHelpLabel}
+                                <KeyboardShortcutSequence
+                                    shortcut={KEYBOARD_SHORTCUTS.navDMMenu}
+                                    hideDescription={true}
+                                    isInsideTooltip={true}
+                                />
+                            </>
+                        }
                         placement='top'
-                        overlay={addTooltip}
                     >
                         <button
                             className='SidebarChannelGroupHeader_addButton'
@@ -302,7 +296,7 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
                         >
                             <i className='icon-plus'/>
                         </button>
-                    </OverlayTrigger>
+                    </WithTooltip>
                 </React.Fragment>
             );