[MM-59902] Migrate tooltips of 'components/global_header/right_controls/settings_button/settings_button.tsx' to WithTooltip (#27823)

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
+        <WithTooltip
-            trigger={['hover', 'focus']}
+            id='productSettings'
-            delayShow={Constants.OVERLAY_TIME_DELAY}
+            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>
     );
 };