[MM-60169] Migrate tooltips of "components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.tsx" to WithTooltip (#27968)

webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap

@@ -262,33 +262,10 @@ exports[`components/admin_console/permission_schemes_settings/permissions_scheme
     >
       Team 8
     </span>
-    <OverlayTrigger
+    <WithTooltip
-      defaultOverlayShown={false}
+      id="id-extra-teams-overlay"
-      delayShow={400}
-      overlay={
-        <Tooltip
-          className="team-scheme-extra-teams-overlay"
-          id="id-extra-teams-overlay"
-        >
-          <span
-            className="team"
-          >
-            Team 9
-          </span>
-          <span
-            className="team"
-          >
-            Team 10
-          </span>
-        </Tooltip>
-      }
       placement="bottom"
-      trigger={
+      title="Team 9, Team 10"
-        Array [
-          "hover",
-          "focus",
-        ]
-      }
     >
       <span
         className="team"
@@ -304,7 +281,7 @@ exports[`components/admin_console/permission_schemes_settings/permissions_scheme
           }
         />
       </span>
-    </OverlayTrigger>
+    </WithTooltip>
   </div>
 </div>
 `;

webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.tsx

@@ -12,11 +12,9 @@ import type {Team} from '@mattermost/types/teams';
 import type {ActionResult} from 'mattermost-redux/types/actions';
 
 import ConfirmModal from 'components/confirm_modal';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
+import WithTooltip from 'components/with_tooltip';
 
-import Constants from 'utils/constants';
 import * as Utils from 'utils/utils';
 
 const MAX_TEAMS_PER_SCHEME_SUMMARY = 8;
@@ -148,17 +146,10 @@ export default class PermissionsSchemeSummary extends React.PureComponent<Props
         let extraTeams = null;
         if (teams.length > MAX_TEAMS_PER_SCHEME_SUMMARY) {
             extraTeams = (
-                <OverlayTrigger
+                <WithTooltip
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    id={scheme.id + '-extra-teams-overlay'}
+                    title={this.props?.teams?.slice(MAX_TEAMS_PER_SCHEME_SUMMARY).map((team) => team.display_name).join(', ') ?? ''}
                     placement='bottom'
-                    overlay={
-                        <Tooltip
-                            className='team-scheme-extra-teams-overlay'
-                            id={scheme.id + '-extra-teams-overlay'}
-                        >
-                            {teams.slice(MAX_TEAMS_PER_SCHEME_SUMMARY)}
-                        </Tooltip>
-                    }
                 >
                     <span
                         className='team'
@@ -170,7 +161,7 @@ export default class PermissionsSchemeSummary extends React.PureComponent<Props
                             values={{number: teams.length - MAX_TEAMS_PER_SCHEME_SUMMARY}}
                         />
                     </span>
-                </OverlayTrigger>
+                </WithTooltip>
             );
             teams = teams.slice(0, MAX_TEAMS_PER_SCHEME_SUMMARY);
         }