diff --git a/webapp/channels/src/components/widgets/inputs/url_input/url_input.tsx b/webapp/channels/src/components/widgets/inputs/url_input/url_input.tsx
index 9b675ef4e8..64f1c7fd5b 100644
--- a/webapp/channels/src/components/widgets/inputs/url_input/url_input.tsx
+++ b/webapp/channels/src/components/widgets/inputs/url_input/url_input.tsx
@@ -5,10 +5,8 @@ import classNames from 'classnames';
 import React, {useEffect, useState} from 'react';
 import {useIntl} from 'react-intl';
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
 
-import Constants from 'utils/constants';
 import {getShortenedURL} from 'utils/url';
 
 import Input from '../input/input';
@@ -93,17 +91,14 @@ function UrlInput({
         <div className={classNames('url-input-main', className)}>
             <div className='url-input-container'>
                 {isShortenedURL ? (
-                    <OverlayTrigger
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                    <WithTooltip
+                        id='urlTooltip'
+                        title={fullURL}
                         placement='top'
-                        overlay={(
-                            <Tooltip id='urlTooltip'>
-                                {fullURL}
-                            </Tooltip>
-                        )}
                     >
                         {urlInputLabel}
-                    </OverlayTrigger>
+                    </WithTooltip>
+
                 ) : (
                     urlInputLabel
                 )}