From ed2d838ac75bdb7c2f9e0aed2f7bef99f82375b0 Mon Sep 17 00:00:00 2001
From: Rita Anene <92169163+Camillarhi@users.noreply.github.com>
Date: Wed, 7 Aug 2024 16:48:47 +0100
Subject: [PATCH] [MM-59902] Migrate tooltips of
 'components/global_header/right_controls/settings_button/settings_button.tsx'
 to WithTooltip (#27823)

---
 .../settings_button/settings_button.tsx       | 28 ++++++++-----------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/webapp/channels/src/components/global_header/right_controls/settings_button/settings_button.tsx b/webapp/channels/src/components/global_header/right_controls/settings_button/settings_button.tsx
index 53197a67ba..139d946860 100644
--- a/webapp/channels/src/components/global_header/right_controls/settings_button/settings_button.tsx
+++ b/webapp/channels/src/components/global_header/right_controls/settings_button/settings_button.tsx
@@ -6,11 +6,10 @@ import {FormattedMessage, useIntl} from 'react-intl';
 
 import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import UserSettingsModal from 'components/user_settings/modal';
+import WithTooltip from 'components/with_tooltip';
 
-import Constants, {ModalIdentifiers} from 'utils/constants';
+import {ModalIdentifiers} from 'utils/constants';
 
 import type {ModalData} from 'types/actions';
 
@@ -23,21 +22,16 @@ type Props = {
 const SettingsButton = (props: Props): JSX.Element | null => {
     const {formatMessage} = useIntl();
 
-    const tooltip = (
-        <Tooltip id='productSettings'>
-            <FormattedMessage
-                id='global_header.productSettings'
-                defaultMessage='Settings'
-            />
-        </Tooltip>
-    );
-
     return (
-        <OverlayTrigger
-            trigger={['hover', 'focus']}
-            delayShow={Constants.OVERLAY_TIME_DELAY}
+        <WithTooltip
+            id='productSettings'
+            title={
+                <FormattedMessage
+                    id='global_header.productSettings'
+                    defaultMessage='Settings'
+                />
+            }
             placement='bottom'
-            overlay={tooltip}
         >
             <IconButton
                 size={'sm'}
@@ -50,7 +44,7 @@ const SettingsButton = (props: Props): JSX.Element | null => {
                 aria-haspopup='dialog'
                 aria-label={formatMessage({id: 'global_header.productSettings', defaultMessage: 'Settings'})}
             />
-        </OverlayTrigger>
+        </WithTooltip>
     );
 };