[bugfix] Resolve overlap between tooltip and list of devices on mobile configuration page

change-beta/@azure-communication-react-379df315-3ae3-42f6-adc5-91bd90acd9ac.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Resolve overlap of tooltip and list of devices on mobile configuration page",
+  "packageName": "@azure/communication-react",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-379df315-3ae3-42f6-adc5-91bd90acd9ac.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Resolve overlap of tooltip and list of devices on mobile configuration page",
+  "packageName": "@azure/communication-react",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/CallComposite/components/LocalPreview.tsx

@@ -114,13 +114,28 @@ export const LocalPreview = (props: LocalPreviewProps): JSX.Element => {
             onToggleMicrophone={onToggleMic}
             disabled={!microphonePermissionGranted || !hasMicrophones}
             showLabel={true}
+            // disable tooltip as it obscures list of devices on mobile
+            strings={
+              props.mobileView ? { tooltipOnContent: '', tooltipOffContent: '', tooltipDisabledContent: '' } : {}
+            }
             styles={localPreviewButtonStyle}
           />
           <CameraButton
             data-ui-id="call-composite-local-device-settings-camera-button"
             {...cameraButtonProps}
             showLabel={true}
             disabled={!cameraPermissionGranted || !hasCameras}
+            // disable tooltip as it obscures list of devices on mobile
+            strings={
+              props.mobileView
+                ? {
+                    tooltipOnContent: '',
+                    tooltipOffContent: '',
+                    tooltipDisabledContent: '',
+                    tooltipVideoLoadingContent: ''
+                  }
+                : {}
+            }
             styles={localPreviewButtonStyle}
           />
           {props.showDevicesButton && (
@@ -130,6 +145,8 @@ export const LocalPreview = (props: LocalPreviewProps): JSX.Element => {
               // disable button whilst all other buttons are disabled
               disabled={!microphonePermissionGranted || !cameraPermissionGranted || hasNoDevices}
               showLabel={true}
+              // disable tooltip as it obscures list of devices on mobile
+              strings={props.mobileView ? { tooltipContent: '' } : {}}
               styles={devicesButtonStyles}
             />
           )}

packages/react-composites/tests/browser/call/hermetic/ConfigurationPage.test.ts

@@ -23,7 +23,8 @@ test.describe('Call Composite E2E Configuration Screen Tests', () => {
     expect(await stableScreenshot(page)).toMatchSnapshot(`call-configuration-page.png`);
   });
 
-  test('local device buttons should show tooltips on hover', async ({ page, serverUrl }) => {
+  test('local device buttons should show tooltips on hover', async ({ page, serverUrl }, testInfo) => {
+    test.skip(isTestProfileMobile(testInfo));
     await page.goto(buildUrlWithMockAdapter(serverUrl, defaultMockConfigurationPageState()));
     await waitForCallCompositeToLoad(page);
     await page.hover(dataUiId('call-composite-local-device-settings-microphone-button'));