diff --git a/webapp/channels/src/components/widgets/inputs/input/input.test.tsx b/webapp/channels/src/components/widgets/inputs/input/input.test.tsx
index b77523ba2f..81f7ad1e66 100644
--- a/webapp/channels/src/components/widgets/inputs/input/input.test.tsx
+++ b/webapp/channels/src/components/widgets/inputs/input/input.test.tsx
@@ -1,10 +1,10 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {mount, shallow} from 'enzyme';
+import {shallow} from 'enzyme';
 import React from 'react';
 
-import OverlayTrigger from 'components/overlay_trigger';
+import WithTooltip from 'components/with_tooltip';
 
 import Input from './input';
 
@@ -35,11 +35,11 @@ describe('components/widgets/inputs/Input', () => {
         expect(clear.length).toEqual(1);
         expect(wrapper.find('CloseCircleIcon').length).toEqual(1);
 
-        const tooltip = wrapper.find(OverlayTrigger);
+        const tooltip = wrapper.find(WithTooltip);
         expect(tooltip.length).toEqual(1);
 
-        const overlay = mount(tooltip.prop('overlay'));
-        expect(overlay.text()).toEqual(clearableTooltipText);
+        const titleProp = tooltip.prop('title');
+        expect(titleProp).toEqual(clearableTooltipText);
 
         clear.first().simulate('mousedown');
 
diff --git a/webapp/channels/src/components/widgets/inputs/input/input.tsx b/webapp/channels/src/components/widgets/inputs/input/input.tsx
index 6c4fa53d7c..fa22c8375f 100644
--- a/webapp/channels/src/components/widgets/inputs/input/input.tsx
+++ b/webapp/channels/src/components/widgets/inputs/input/input.tsx
@@ -7,10 +7,9 @@ import {useIntl} from 'react-intl';
 
 import {CloseCircleIcon} from '@mattermost/compass-icons/components';
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
 
-import Constants, {ItemStatus} from 'utils/constants';
+import {ItemStatus} from 'utils/constants';
 
 import './input.scss';
 
@@ -143,17 +142,13 @@ const Input = React.forwardRef((
             onMouseDown={handleOnClear}
             onTouchEnd={handleOnClear}
         >
-            <OverlayTrigger
-                delayShow={Constants.OVERLAY_TIME_DELAY}
+            <WithTooltip
+                id='inputClearTooltip'
+                title={clearableTooltipText || formatMessage({id: 'widget.input.clear', defaultMessage: 'Clear'})}
                 placement='bottom'
-                overlay={(
-                    <Tooltip id={'InputClearTooltip'}>
-                        {clearableTooltipText || formatMessage({id: 'widget.input.clear', defaultMessage: 'Clear'})}
-                    </Tooltip>
-                )}
             >
                 <CloseCircleIcon size={18}/>
-            </OverlayTrigger>
+            </WithTooltip>
         </div>
     ) : null;