fix(react-tooltip): dismiss tooltip when document becomes hidden (#36023)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: tudorpopams <97875118+tudorpopams@users.noreply.github.com>

Author: Copilot

change/@fluentui-react-tooltip-5cd4f2be-856a-414c-8af5-12df717d9073.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: dismiss Tooltip when the document becomes hidden (e.g. tab backgrounded or app switched on mobile)",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "198982749+Copilot@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.test.tsx

@@ -3,7 +3,7 @@ import { Tooltip } from './Tooltip';
 import { isConformant } from '../../testing/isConformant';
 import type { IsConformantOptions } from '@fluentui/react-conformance';
 import type { RenderResult } from '@testing-library/react';
-import { render } from '@testing-library/react';
+import { act, fireEvent, render } from '@testing-library/react';
 import { resetIdsForTests } from '@fluentui/react-utilities';
 
 // testing-library's queryByRole function doesn't look inside portals
@@ -148,4 +148,26 @@ describe('Tooltip', () => {
     expect(target.getAttribute('aria-description')).toBe(null);
     expect(target.getAttribute('aria-describedby')).toBe('test-describedby');
   });
+
+  it('hides the tooltip when the document becomes hidden (e.g. tab backgrounded on mobile)', () => {
+    const onVisibleChange = jest.fn();
+    const result = render(
+      <Tooltip content="Tooltip content" relationship="label" visible onVisibleChange={onVisibleChange}>
+        <button />
+      </Tooltip>,
+    );
+
+    // Tooltip starts visible
+    expect(queryByRoleTooltip(result)).not.toBeNull();
+
+    // Simulate the tab being backgrounded / app switched on mobile
+    const visibilityStateSpy = jest.spyOn(document, 'visibilityState', 'get').mockReturnValue('hidden');
+    act(() => {
+      fireEvent(document, new Event('visibilitychange'));
+    });
+
+    expect(onVisibleChange).toHaveBeenCalledWith(undefined, expect.objectContaining({ visible: false }));
+
+    visibilityStateSpy.mockRestore();
+  });
 });

packages/react-components/react-tooltip/library/src/components/Tooltip/useTooltipBase.tsx

@@ -149,12 +149,24 @@ export const useTooltipBase_unstable = (props: TooltipBaseProps): TooltipBaseSta
         capture: true,
       });
 
+      // Dismiss the tooltip when the document becomes hidden (e.g. tab backgrounded,
+      // app switched on mobile). The original trigger (hover/tap/focus) is no longer
+      // active in this case, so persisting the tooltip is a stale UI state.
+      const onDocumentVisibilityChange = () => {
+        if (targetDocument?.visibilityState === 'hidden') {
+          thisTooltip.hide();
+        }
+      };
+
+      targetDocument?.addEventListener('visibilitychange', onDocumentVisibilityChange);
+
       return () => {
         if (context.visibleTooltip === thisTooltip) {
           context.visibleTooltip = undefined;
         }
 
         targetDocument?.removeEventListener('keydown', onDocumentKeyDown, { capture: true });
+        targetDocument?.removeEventListener('visibilitychange', onDocumentVisibilityChange);
       };
     }
   }, [context, targetDocument, visible, setVisible]);