[MM-59339] Migrate tooltips of "components/quick_input/quick_input.tsx" to WithTooltip (#27594)

webapp/channels/src/components/quick_input/quick_input.tsx

@@ -8,10 +8,7 @@ import type {ReactNode} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import AutosizeTextarea from 'components/autosize_textarea';
-import OverlayTrigger from 'components/overlay_trigger';
+import WithTooltip from 'components/with_tooltip';
-import Tooltip from 'components/tooltip';
-
-import Constants from 'utils/constants';
 
 export type Props = {
 
@@ -147,7 +144,7 @@ export class QuickInput extends React.PureComponent<Props> {
     };
 
     render() {
-        let clearableTooltipText = this.props.clearableTooltipText;
+        let clearableTooltipText = this.props.clearableTooltipText || '';
         if (!clearableTooltipText) {
             clearableTooltipText = (
                 <FormattedMessage
@@ -157,12 +154,6 @@ export class QuickInput extends React.PureComponent<Props> {
             );
         }
 
-        const clearableTooltip = (
-            <Tooltip id={'InputClearTooltip'}>
-                {clearableTooltipText}
-            </Tooltip>
-        );
-
         const {
             value,
             inputComponent,
@@ -206,10 +197,10 @@ export class QuickInput extends React.PureComponent<Props> {
                 onTouchEnd={this.onClear}
                 role='button'
             >
-                <OverlayTrigger
+                <WithTooltip
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    id='inputClearTooltip'
+                    title={clearableTooltipText}
                     placement={tooltipPosition}
-                    overlay={clearableTooltip}
                 >
                     <span
                         className='input-clear-x'
@@ -217,7 +208,7 @@ export class QuickInput extends React.PureComponent<Props> {
                     >
                         <i className='icon icon-close-circle'/>
                     </span>
-                </OverlayTrigger>
+                </WithTooltip>
             </div>
             }
         </div>);