[MM-60161] Migrate tooltips of 'components/global_header/right_controls/at_mentions_button/at_mentions_button.tsx' to WithTooltip (#27951)

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/global_header/right_controls/at_mentions_button/__snapshots__/at_mentions_button.test.tsx.snap

@@ -1,13 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/global/AtMentionsButton should match snapshot 1`] = `
-<OverlayTrigger
-  defaultOverlayShown={false}
-  delayShow={400}
-  overlay={
-    <Tooltip
-      id="recentMentions"
-    >
+<WithTooltip
+  id="recentMentions"
+  placement="bottom"
+  title={
+    <React.Fragment>
       <Memo(MemoizedFormattedMessage)
         defaultMessage="Recent mentions"
         id="channel_header.recentMentions"
@@ -28,14 +26,7 @@ exports[`components/global/AtMentionsButton should match snapshot 1`] = `
           }
         }
       />
-    </Tooltip>
-  }
-  placement="bottom"
-  trigger={
-    Array [
-      "hover",
-      "focus",
-    ]
+    </React.Fragment>
   }
 >
   <ForwardRef
@@ -49,5 +40,5 @@ exports[`components/global/AtMentionsButton should match snapshot 1`] = `
     size="sm"
     toggled={false}
   />
-</OverlayTrigger>
+</WithTooltip>
 `;

webapp/channels/src/components/global_header/right_controls/at_mentions_button/at_mentions_button.tsx

@@ -11,10 +11,9 @@ import {closeRightHandSide, showMentions} from 'actions/views/rhs';
 import {getRhsState} from 'selectors/rhs';
 
 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, {RHSStates} from 'utils/constants';
+import {RHSStates} from 'utils/constants';
 
 import type {GlobalState} from 'types/store';
 
@@ -32,26 +31,23 @@ const AtMentionsButton = (): JSX.Element => {
         }
     };
 
-    const tooltip = (
-        <Tooltip id='recentMentions'>
-            <FormattedMessage
-                id='channel_header.recentMentions'
-                defaultMessage='Recent mentions'
-            />
-            <KeyboardShortcutSequence
-                shortcut={KEYBOARD_SHORTCUTS.navMentions}
-                hideDescription={true}
-                isInsideTooltip={true}
-            />
-        </Tooltip>
-    );
-
     return (
-        <OverlayTrigger
-            trigger={['hover', 'focus']}
-            delayShow={Constants.OVERLAY_TIME_DELAY}
+        <WithTooltip
+            id='recentMentions'
             placement='bottom'
-            overlay={tooltip}
+            title={
+                <>
+                    <FormattedMessage
+                        id='channel_header.recentMentions'
+                        defaultMessage='Recent mentions'
+                    />
+                    <KeyboardShortcutSequence
+                        shortcut={KEYBOARD_SHORTCUTS.navMentions}
+                        hideDescription={true}
+                        isInsideTooltip={true}
+                    />
+                </>
+            }
         >
             <IconButton
                 size={'sm'}
@@ -64,7 +60,7 @@ const AtMentionsButton = (): JSX.Element => {
                 aria-controls='searchContainer' // Must be changed if the ID of the container changes
                 aria-label={formatMessage({id: 'channel_header.recentMentions', defaultMessage: 'Recent mentions'})}
             />
-        </OverlayTrigger>
+        </WithTooltip>
     );
 };