Add tooltip to participant items only on overflow (#4728)

Author: Leah-Xia-Microsoft

packages/react-composites/src/composites/common/ParticipantContainer.tsx

@@ -12,7 +12,7 @@ import {
   headingMoreButtonStyles
 } from './styles/ParticipantContainer.styles';
 import { ParticipantList, ParticipantListProps, ParticipantMenuItemsCallback } from '@internal/react-components';
-import { FocusZone, Stack, Text, useTheme } from '@fluentui/react';
+import { FocusZone, Stack, Text, TooltipHost, TooltipOverflowMode, getId, useTheme } from '@fluentui/react';
 import { DefaultButton, IContextualMenuProps } from '@fluentui/react';
 import { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';
 import { useId } from '@fluentui/react-hooks';
@@ -67,6 +67,7 @@ export const ParticipantListWithHeading = (props: {
   const theme = useTheme();
   /* @conditional-compile-remove(total-participant-count) */
   const totalParticipantCount = participantListProps.totalParticipantCount;
+  const tooltipId: string = getId('text-tooltip');
   const subheadingStyleThemed = useMemo(
     () => ({
       root: {
@@ -117,9 +118,13 @@ export const ParticipantListWithHeading = (props: {
                 allowActiveBorder={true}
               />
               {options?.text && (
-                <Text nowrap={true} styles={displayNameStyles}>
-                  {options?.text}
-                </Text>
+                <div style={displayNameStyles}>
+                  <TooltipHost content={options?.text} id={tooltipId} overflowMode={TooltipOverflowMode.Parent}>
+                    <Text nowrap={false} aria-labelledby={tooltipId}>
+                      {options?.text}
+                    </Text>
+                  </TooltipHost>
+                </div>
               )}
             </>
           )}

packages/react-composites/src/composites/common/styles/ParticipantContainer.styles.ts

@@ -1,15 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {
-  IStackStyles,
-  IStackItemStyles,
-  IStackTokens,
-  mergeStyles,
-  Theme,
-  ITextStyles,
-  IButtonStyles
-} from '@fluentui/react';
+import { IStackStyles, IStackItemStyles, IStackTokens, mergeStyles, Theme, IButtonStyles } from '@fluentui/react';
 import { ParticipantListStyles } from '@internal/react-components';
 import { CHAT_CONTAINER_ZINDEX } from '../../ChatComposite/styles/Chat.styles';
 
@@ -169,12 +161,11 @@ export const participantListMobileStyle: ParticipantListStyles = {
 /**
  * @private
  */
-export const displayNameStyles: ITextStyles = {
-  root: {
-    padding: '0.5rem',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden'
-  }
+export const displayNameStyles = {
+  padding: '0.5rem',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
 };
 
 /**