diff --git a/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_edit_table_row.tsx b/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_edit_table_row.tsx
index 14343bbe2e..104cd9d784 100644
--- a/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_edit_table_row.tsx
+++ b/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_edit_table_row.tsx
@@ -10,8 +10,7 @@ import {
 } from '@mattermost/compass-icons/components';
 import type {AllowedIPRange} from '@mattermost/types/config';
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
 
 type EditTableRowProps = {
     allowedIPRange: AllowedIPRange;
@@ -33,8 +32,6 @@ const EditTableRow = ({
     hoveredRow,
 }: EditTableRowProps) => {
     const {formatMessage} = useIntl();
-    const editTooltip = <Tooltip id='edit-tooltip'>{formatMessage({id: 'admin.ip_filtering.edit', defaultMessage: 'Edit'})}</Tooltip>;
-    const deleteTooltip = <Tooltip id='delete-tooltip'>{formatMessage({id: 'admin.ip_filtering.delete', defaultMessage: 'Delete'})}</Tooltip>;
     return (
         <div
             className='Row'
@@ -46,9 +43,10 @@ const EditTableRow = ({
             <div className='Actions'>
                 {hoveredRow === index && (
                     <>
-                        <OverlayTrigger
+                        <WithTooltip
+                            id='edit-tooltip'
                             placement='top'
-                            overlay={editTooltip}
+                            title={formatMessage({id: 'admin.ip_filtering.edit', defaultMessage: 'Edit'})}
                         >
                             <div
                                 className='edit'
@@ -58,10 +56,11 @@ const EditTableRow = ({
                             >
                                 <PencilOutlineIcon size={20}/>
                             </div>
-                        </OverlayTrigger>
-                        <OverlayTrigger
+                        </WithTooltip>
+                        <WithTooltip
+                            id='delete-tooltip'
                             placement='top'
-                            overlay={deleteTooltip}
+                            title={formatMessage({id: 'admin.ip_filtering.delete', defaultMessage: 'Delete'})}
                         >
                             <div
                                 className='delete'
@@ -74,7 +73,7 @@ const EditTableRow = ({
                                     color='red'
                                 />
                             </div>
-                        </OverlayTrigger>
+                        </WithTooltip>
                     </>
                 )}
             </div>