diff --git a/webapp/channels/src/components/global_header/right_controls/saved_posts_button/__snapshots__/saved_posts_button.test.tsx.snap b/webapp/channels/src/components/global_header/right_controls/saved_posts_button/__snapshots__/saved_posts_button.test.tsx.snap
index f60f77d66e..455473acc6 100644
--- a/webapp/channels/src/components/global_header/right_controls/saved_posts_button/__snapshots__/saved_posts_button.test.tsx.snap
+++ b/webapp/channels/src/components/global_header/right_controls/saved_posts_button/__snapshots__/saved_posts_button.test.tsx.snap
@@ -1,25 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/global/AtMentionsButton should match snapshot 1`] = `
-<OverlayTrigger
-  defaultOverlayShown={false}
-  delayShow={400}
-  overlay={
-    <Tooltip
-      id="recentMentions"
-    >
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Saved messages"
-        id="channel_header.flagged"
-      />
-    </Tooltip>
-  }
+<WithTooltip
+  id="recentMentions"
   placement="bottom"
-  trigger={
-    Array [
-      "hover",
-      "focus",
-    ]
+  title={
+    <Memo(MemoizedFormattedMessage)
+      defaultMessage="Saved messages"
+      id="channel_header.flagged"
+    />
   }
 >
   <ForwardRef
@@ -33,5 +22,5 @@ exports[`components/global/AtMentionsButton should match snapshot 1`] = `
     size="sm"
     toggled={false}
   />
-</OverlayTrigger>
+</WithTooltip>
 `;
diff --git a/webapp/channels/src/components/global_header/right_controls/saved_posts_button/saved_posts_button.tsx b/webapp/channels/src/components/global_header/right_controls/saved_posts_button/saved_posts_button.tsx
index 7da634ee36..4bed67de43 100644
--- a/webapp/channels/src/components/global_header/right_controls/saved_posts_button/saved_posts_button.tsx
+++ b/webapp/channels/src/components/global_header/right_controls/saved_posts_button/saved_posts_button.tsx
@@ -10,10 +10,9 @@ import IconButton from '@mattermost/compass-components/components/icon-button';
 import {closeRightHandSide, showFlaggedPosts} from 'actions/views/rhs';
 import {getRhsState} from 'selectors/rhs';
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
 
-import Constants, {RHSStates} from 'utils/constants';
+import {RHSStates} from 'utils/constants';
 
 import type {GlobalState} from 'types/store';
 
@@ -31,21 +30,16 @@ const SavedPostsButton = (): JSX.Element | null => {
         }
     };
 
-    const tooltip = (
-        <Tooltip id='recentMentions'>
-            <FormattedMessage
-                id='channel_header.flagged'
-                defaultMessage='Saved messages'
-            />
-        </Tooltip>
-    );
-
     return (
-        <OverlayTrigger
-            trigger={['hover', 'focus']}
-            delayShow={Constants.OVERLAY_TIME_DELAY}
+        <WithTooltip
+            id='recentMentions'
+            title={
+                <FormattedMessage
+                    id='channel_header.flagged'
+                    defaultMessage='Saved messages'
+                />
+            }
             placement='bottom'
-            overlay={tooltip}
         >
             <IconButton
                 size={'sm'}
@@ -58,7 +52,7 @@ const SavedPostsButton = (): JSX.Element | null => {
                 aria-controls='searchContainer' // Must be changed if the ID of the container changes
                 aria-label={formatMessage({id: 'channel_header.flagged', defaultMessage: 'Saved messages'})}
             />
-        </OverlayTrigger>
+        </WithTooltip>
     );
 };