[MM-59357] Migrate tooltips of "components/custom_status/custom_status_suggestion.tsx" to WithTooltip (#27637)

webapp/channels/src/components/custom_status/custom_status_suggestion.tsx

@@ -9,10 +9,9 @@ import type {UserCustomStatus} from '@mattermost/types/users';
 import {CustomStatusDuration} from '@mattermost/types/users';
 
 import RenderEmoji from 'components/emoji/render_emoji';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
 
-import Constants, {durationValues} from 'utils/constants';
+import {durationValues} from 'utils/constants';
 
 import CustomStatusText from './custom_status_text';
 
@@ -42,17 +41,16 @@ const CustomStatusSuggestion: React.FC<Props> = (props: Props) => {
     };
 
     const clearButton = handleClear ? (
-        <div
-            className='suggestion-clear'
-        >
-            <OverlayTrigger
-                delayShow={Constants.OVERLAY_TIME_DELAY}
+        <div className='suggestion-clear'>
+            <WithTooltip
                 placement='top'
-                overlay={
-                    <Tooltip id='clear-recent-custom-status'>
-                        {'Clear'}
-                    </Tooltip>
+                title={
+                    <FormattedMessage
+                        id='custom_status.suggestions.clear'
+                        defaultMessage='Clear'
+                    />
                 }
+                id='clear-recent-custom-status'
             >
                 <button
                     className='style--none input-clear-x'
@@ -60,7 +58,7 @@ const CustomStatusSuggestion: React.FC<Props> = (props: Props) => {
                 >
                     <i className='icon icon-close-circle'/>
                 </button>
-            </OverlayTrigger>
+            </WithTooltip>
         </div>
     ) : null;
 

webapp/channels/src/i18n/en.json

@@ -3404,6 +3404,7 @@
   "custom_status.modal_cancel": "Clear Status",
   "custom_status.modal_confirm": "Set Status",
   "custom_status.set_status": "Set a status",
+  "custom_status.suggestions.clear": "Clear",
   "custom_status.suggestions.in_a_meeting": "In a meeting",
   "custom_status.suggestions.on_a_vacation": "On a vacation",
   "custom_status.suggestions.out_for_lunch": "Out for lunch",