[MM-59328] Migrate tooltips of "components/admin_console/team_channel_settings/group/group_users/users_to_remove_groups.tsx" to WithTooltip (#27640)

webapp/channels/src/components/admin_console/team_channel_settings/group/group_users/__snapshots__/users_to_remove_groups.test.tsx.snap

@@ -28,22 +28,10 @@ exports[`components/admin_console/team_channel_settings/group/UsersToRemoveGroup
 <div
   className="UsersToRemoveGroups"
 >
-  <OverlayTrigger
+  <WithTooltip
-    defaultOverlayShown={false}
+    id="groupsTooltip"
-    overlay={
-      <Tooltip
-        id="groupsTooltip"
-      >
-        group1, group2, group3
-      </Tooltip>
-    }
     placement="bottom"
-    trigger={
+    title="group1, group2, group3"
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
   >
     <a
       href="#"
@@ -58,6 +46,6 @@ exports[`components/admin_console/team_channel_settings/group/UsersToRemoveGroup
         }
       />
     </a>
-  </OverlayTrigger>
+  </WithTooltip>
 </div>
 `;

webapp/channels/src/components/admin_console/team_channel_settings/group/group_users/users_to_remove_groups.tsx

@@ -7,8 +7,7 @@ import {FormattedMessage} from 'react-intl';
 import type {Group} from '@mattermost/types/groups';
 import type {UserProfile} from '@mattermost/types/users';
 
-import OverlayTrigger from 'components/overlay_trigger';
+import WithTooltip from 'components/with_tooltip';
-import Tooltip from 'components/tooltip';
 
 type ProfileWithGroups = Partial<UserProfile & {
     groups: Array<Partial<Group>>;
@@ -36,17 +35,16 @@ export default function UsersToRemoveGroups(props: UsersToRemoveGroupsProps): JS
     } else if (groups.length === 0) {
         column = message;
     } else {
-        const tooltip = <Tooltip id='groupsTooltip'>{groups.map((g) => g.display_name).join(', ')}</Tooltip>;
+        const tooltip = groups.map((g) => g.display_name).join(', ');
 
         column = (
-            <OverlayTrigger
+            <WithTooltip
+                id='groupsTooltip'
                 placement='bottom'
-                overlay={tooltip}
+                title={tooltip}
             >
-                <a href='#'>
+                <a href='#'>{message}</a>
-                    {message}
+            </WithTooltip>
-                </a>
-            </OverlayTrigger>
         );
     }