diff --git a/webapp/channels/src/components/advanced_create_post/priority_labels.tsx b/webapp/channels/src/components/advanced_create_post/priority_labels.tsx
index 6ac7025c7d..e5d674a4ac 100644
--- a/webapp/channels/src/components/advanced_create_post/priority_labels.tsx
+++ b/webapp/channels/src/components/advanced_create_post/priority_labels.tsx
@@ -3,18 +3,15 @@
 
 import React, {memo} from 'react';
 import type {CSSProperties} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 import styled from 'styled-components';
 
 import {CheckCircleOutlineIcon, BellRingOutlineIcon} from '@mattermost/compass-icons/components';
 import type {PostPriorityMetadata} from '@mattermost/types/posts';
 
-import OverlayTrigger from 'components/overlay_trigger';
 import {HasNoMentions, HasSpecialMentions} from 'components/post_priority/error_messages';
 import PriorityLabel from 'components/post_priority/post_priority_label';
-import Tooltip from 'components/tooltip';
-
-import Constants from 'utils/constants';
+import WithTooltip from 'components/with_tooltip';
 
 type Props = {
     canRemove: boolean;
@@ -97,6 +94,7 @@ function PriorityLabels({
     priority,
     requestedAck,
 }: Props) {
+    const intl = useIntl();
     return (
         <Priority padding={padding}>
             {priority && (
@@ -106,41 +104,31 @@ function PriorityLabels({
                 />
             )}
             {persistentNotifications && (
-                <OverlayTrigger
+                <WithTooltip
+                    id='post-priority-picker-persistent-notifications-tooltip'
                     placement='top'
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                    trigger={Constants.OVERLAY_DEFAULT_TRIGGER}
-                    overlay={(
-                        <Tooltip id='post-priority-picker-persistent-notifications-tooltip'>
-                            <FormattedMessage
-                                id={'post_priority.persistent_notifications.tooltip'}
-                                defaultMessage={'Persistent notifications will be sent'}
-                            />
-                        </Tooltip>
-                    )}
+                    title={intl.formatMessage({
+                        id: 'post_priority.persistent_notifications.tooltip',
+                        defaultMessage: 'Persistent notifications will be sent',
+                    })}
                 >
                     <Notifications>
                         <BellRingOutlineIcon size={14}/>
                     </Notifications>
-                </OverlayTrigger>
+                </WithTooltip>
             )}
             {requestedAck && (
                 <Acknowledgements hasError={hasError}>
-                    <OverlayTrigger
+                    <WithTooltip
+                        id='post-priority-picker-ack-tooltip'
                         placement='top'
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
-                        trigger={Constants.OVERLAY_DEFAULT_TRIGGER}
-                        overlay={(
-                            <Tooltip id='post-priority-picker-ack-tooltip'>
-                                <FormattedMessage
-                                    id={'post_priority.request_acknowledgement.tooltip'}
-                                    defaultMessage={'Acknowledgement will be requested'}
-                                />
-                            </Tooltip>
-                        )}
+                        title={intl.formatMessage({
+                            id: 'post_priority.request_acknowledgement.tooltip',
+                            defaultMessage: 'Acknowledgement will be requested',
+                        })}
                     >
                         <CheckCircleOutlineIcon size={14}/>
-                    </OverlayTrigger>
+                    </WithTooltip>
                     {!(priority) && (
                         <FormattedMessage
                             id={'post_priority.request_acknowledgement'}
@@ -155,19 +143,13 @@ function PriorityLabels({
                 </Error>
             )}
             {canRemove && (
-                <OverlayTrigger
+                <WithTooltip
+                    id='post-priority-picker-tooltip'
                     placement='top'
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                    trigger={Constants.OVERLAY_DEFAULT_TRIGGER}
-                    overlay={(
-                        <Tooltip id='post-priority-picker-tooltip'>
-                            <FormattedMessage
-                                id={'post_priority.remove'}
-                                defaultMessage={'Remove {priority}'}
-                                values={{priority}}
-                            />
-                        </Tooltip>
-                    )}
+                    title={intl.formatMessage({
+                        id: 'post_priority.remove',
+                        defaultMessage: 'Remove {priority}',
+                    }, {priority})}
                 >
                     <Close
                         type='button'
@@ -183,7 +165,7 @@ function PriorityLabels({
                             />
                         </span>
                     </Close>
-                </OverlayTrigger>
+                </WithTooltip>
             )}
         </Priority>
     );
diff --git a/webapp/channels/src/components/common/comment_icon.tsx b/webapp/channels/src/components/common/comment_icon.tsx
index c2faa8b5b6..1ccc50af37 100644
--- a/webapp/channels/src/components/common/comment_icon.tsx
+++ b/webapp/channels/src/components/common/comment_icon.tsx
@@ -2,11 +2,10 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {useIntl} from 'react-intl';
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import ReplyIcon from 'components/widgets/icons/reply_icon';
+import WithTooltip from 'components/with_tooltip';
 
 import type {Locations} from 'utils/constants';
 
@@ -42,23 +41,14 @@ const CommentIcon = ({
         iconStyle = `${iconStyle} ${searchStyle}`;
     }
 
-    const tooltip = (
-        <Tooltip
-            id='comment-icon-tooltip'
-            className='hidden-xs'
-        >
-            <FormattedMessage
-                id='post_info.comment_icon.tooltip.reply'
-                defaultMessage='Reply'
-            />
-        </Tooltip>
-    );
-
     return (
-        <OverlayTrigger
-            delayShow={500}
+        <WithTooltip
+            id='comment-icon-tooltip'
             placement='top'
-            overlay={tooltip}
+            title={intl.formatMessage({
+                id: 'post_info.comment_icon.tooltip.reply',
+                defaultMessage: 'Reply',
+            })}
         >
             <button
                 id={`${location}_commentIcon_${postId}`}
@@ -71,7 +61,7 @@ const CommentIcon = ({
                     {commentCountSpan}
                 </span>
             </button>
-        </OverlayTrigger>
+        </WithTooltip>
     );
 };
 
diff --git a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
index 2ae98f768a..4d8deebb61 100644
--- a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
+++ b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
@@ -813,79 +813,15 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                     <div
                       className="Acknowledgements-kPkVCv dNydui"
                     >
-                      <OverlayTrigger
-                        defaultOverlayShown={false}
-                        delayShow={400}
-                        overlay={
-                          <Tooltip
-                            id="post-priority-picker-ack-tooltip"
-                          >
-                            <Memo(MemoizedFormattedMessage)
-                              defaultMessage="Acknowledgement will be requested"
-                              id="post_priority.request_acknowledgement.tooltip"
-                            />
-                          </Tooltip>
-                        }
+                      <WithTooltip
+                        id="post-priority-picker-ack-tooltip"
                         placement="top"
-                        trigger={
-                          Array [
-                            "hover",
-                            "focus",
-                          ]
-                        }
+                        title="Acknowledgement will be requested"
                       >
                         <OverlayTrigger
                           defaultOverlayShown={false}
-                          delayShow={400}
-                          overlay={
-                            <OverlayWrapper
-                              id="post-priority-picker-ack-tooltip"
-                              intl={
-                                Object {
-                                  "$t": [Function],
-                                  "defaultFormats": Object {},
-                                  "defaultLocale": "en",
-                                  "defaultRichTextElements": undefined,
-                                  "fallbackOnEmptyString": true,
-                                  "formatDate": [Function],
-                                  "formatDateTimeRange": [Function],
-                                  "formatDateToParts": [Function],
-                                  "formatDisplayName": [Function],
-                                  "formatList": [Function],
-                                  "formatListToParts": [Function],
-                                  "formatMessage": [Function],
-                                  "formatNumber": [Function],
-                                  "formatNumberToParts": [Function],
-                                  "formatPlural": [Function],
-                                  "formatRelativeTime": [Function],
-                                  "formatTime": [Function],
-                                  "formatTimeToParts": [Function],
-                                  "formats": Object {},
-                                  "formatters": Object {
-                                    "getDateTimeFormat": [Function],
-                                    "getDisplayNames": [Function],
-                                    "getListFormat": [Function],
-                                    "getMessageFormat": [Function],
-                                    "getNumberFormat": [Function],
-                                    "getPluralRules": [Function],
-                                    "getRelativeTimeFormat": [Function],
-                                  },
-                                  "locale": "en",
-                                  "messages": Object {},
-                                  "onError": [Function],
-                                  "onWarn": [Function],
-                                  "textComponent": "span",
-                                  "timeZone": "Etc/UTC",
-                                  "wrapRichTextChunksInFragment": undefined,
-                                }
-                              }
-                            >
-                              <Memo(MemoizedFormattedMessage)
-                                defaultMessage="Acknowledgement will be requested"
-                                id="post_priority.request_acknowledgement.tooltip"
-                              />
-                            </OverlayWrapper>
-                          }
+                          delay={400}
+                          overlay={<Unknown />}
                           placement="top"
                           trigger={
                             Array [
@@ -894,34 +830,89 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                             ]
                           }
                         >
-                          <CheckCircleOutlineIcon
-                            onBlur={[Function]}
-                            onClick={null}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            size={14}
+                          <OverlayTrigger
+                            defaultOverlayShown={false}
+                            delay={400}
+                            overlay={
+                              <OverlayWrapper
+                                intl={
+                                  Object {
+                                    "$t": [Function],
+                                    "defaultFormats": Object {},
+                                    "defaultLocale": "en",
+                                    "defaultRichTextElements": undefined,
+                                    "fallbackOnEmptyString": true,
+                                    "formatDate": [Function],
+                                    "formatDateTimeRange": [Function],
+                                    "formatDateToParts": [Function],
+                                    "formatDisplayName": [Function],
+                                    "formatList": [Function],
+                                    "formatListToParts": [Function],
+                                    "formatMessage": [Function],
+                                    "formatNumber": [Function],
+                                    "formatNumberToParts": [Function],
+                                    "formatPlural": [Function],
+                                    "formatRelativeTime": [Function],
+                                    "formatTime": [Function],
+                                    "formatTimeToParts": [Function],
+                                    "formats": Object {},
+                                    "formatters": Object {
+                                      "getDateTimeFormat": [Function],
+                                      "getDisplayNames": [Function],
+                                      "getListFormat": [Function],
+                                      "getMessageFormat": [Function],
+                                      "getNumberFormat": [Function],
+                                      "getPluralRules": [Function],
+                                      "getRelativeTimeFormat": [Function],
+                                    },
+                                    "locale": "en",
+                                    "messages": Object {},
+                                    "onError": [Function],
+                                    "onWarn": [Function],
+                                    "textComponent": "span",
+                                    "timeZone": "Etc/UTC",
+                                    "wrapRichTextChunksInFragment": undefined,
+                                  }
+                                }
+                              />
+                            }
+                            placement="top"
+                            trigger={
+                              Array [
+                                "hover",
+                                "focus",
+                              ]
+                            }
                           >
-                            <svg
-                              fill="currentColor"
-                              height={14}
+                            <CheckCircleOutlineIcon
                               onBlur={[Function]}
                               onClick={null}
                               onFocus={[Function]}
                               onMouseOut={[Function]}
                               onMouseOver={[Function]}
-                              version="1.1"
-                              viewBox="0 0 24 24"
-                              width={14}
-                              xmlns="http://www.w3.org/2000/svg"
+                              size={14}
                             >
-                              <path
-                                d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
-                              />
-                            </svg>
-                          </CheckCircleOutlineIcon>
+                              <svg
+                                fill="currentColor"
+                                height={14}
+                                onBlur={[Function]}
+                                onClick={null}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                version="1.1"
+                                viewBox="0 0 24 24"
+                                width={14}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
+                                />
+                              </svg>
+                            </CheckCircleOutlineIcon>
+                          </OverlayTrigger>
                         </OverlayTrigger>
-                      </OverlayTrigger>
+                      </WithTooltip>
                       <FormattedMessage
                         defaultMessage="Request acknowledgement"
                         id="post_priority.request_acknowledgement"
diff --git a/webapp/channels/src/components/sidebar/add_channel_dropdown.tsx b/webapp/channels/src/components/sidebar/add_channel_dropdown.tsx
index 6982fb69d9..4876c81d4b 100644
--- a/webapp/channels/src/components/sidebar/add_channel_dropdown.tsx
+++ b/webapp/channels/src/components/sidebar/add_channel_dropdown.tsx
@@ -2,15 +2,14 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {useIntl} from 'react-intl';
 
 import {trackEvent} from 'actions/telemetry_actions';
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import {CreateAndJoinChannelsTour, InvitePeopleTour} from 'components/tours/onboarding_tour';
 import Menu from 'components/widgets/menu/menu';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
+import WithTooltip from 'components/with_tooltip';
 
 type Props = {
     canCreateChannel: boolean;
@@ -146,28 +145,19 @@ const AddChannelDropdown = ({
         return null;
     }
 
-    const tooltip = (
-        <Tooltip
-            id='new-group-tooltip'
-            className='hidden-xs'
-        >
-            <FormattedMessage
-                id={'sidebar_left.add_channel_dropdown.browseOrCreateChannels'}
-                defaultMessage='Browse or create channels'
-            />
-        </Tooltip>
-    );
-
     return (
         <MenuWrapper
             className='AddChannelDropdown'
             onToggle={trackOpen}
             open={isAddChannelOpen}
         >
-            <OverlayTrigger
-                delayShow={500}
+            <WithTooltip
+                id='new-group-tooltip'
                 placement='top'
-                overlay={tooltip}
+                title={intl.formatMessage({
+                    id: 'sidebar_left.add_channel_dropdown.browseOrCreateChannels',
+                    defaultMessage: 'Browse or create channels',
+                })}
             >
                 <button
                     className={'AddChannelDropdown_dropdownButton'}
@@ -175,7 +165,7 @@ const AddChannelDropdown = ({
                 >
                     <i className='icon-plus'/>
                 </button>
-            </OverlayTrigger>
+            </WithTooltip>
             <Menu
                 id='AddChannelDropdown'
                 ariaLabel={intl.formatMessage({id: 'sidebar_left.add_channel_dropdown.dropdownAriaLabel', defaultMessage: 'Add Channel Dropdown'})}