[LG-5488] fix(tooltip): only open tooltip on keyboard-driven focus

Gate focus-triggered open behind useUsingKeyboardContext so programmatic
focus (e.g. focus restored after modal close) no longer opens the tooltip.
Code copy button now opens its tooltip explicitly on click.

Author: tsck

.changeset/tooltip-keyboard-focus.md

@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/tooltip': patch
+'@leafygreen-ui/code': patch
+---
+
+[LG-5488](https://jira.mongodb.org/browse/LG-5488): `Tooltip` no longer opens when its trigger receives focus from mouse interaction or programmatic focus (e.g. focus restored after closing a modal). It still opens when focus comes from keyboard navigation. `Code`'s copy button now explicitly opens its tooltip on click to continue showing the copied confirmation.

packages/code/src/CopyButton/CopyButton.tsx

@@ -80,6 +80,9 @@ function CopyButton({ onCopy, contents, className, ...rest }: CopyProps) {
     e.preventDefault();
     onCopy?.();
     setCopied(true);
+    // Explicitly open the tooltip to show the copied confirmation,
+    // since focus alone no longer opens the tooltip
+    openTooltip();
   };
 
   /**

packages/tooltip/src/Tooltip/Tooltip.spec.tsx

@@ -11,6 +11,7 @@ import { axe } from 'jest-axe';
 
 import { Icon } from '@leafygreen-ui/icon';
 import CloudIcon from '@leafygreen-ui/icon/dist/Cloud';
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { HTMLElementProps, OneOf } from '@leafygreen-ui/lib';
 import { RenderMode } from '@leafygreen-ui/popover';
 import { transitionDuration } from '@leafygreen-ui/tokens';
@@ -157,6 +158,59 @@ describe('packages/tooltip', () => {
       expect(queryByTestId(tooltipTestId)).not.toBeInTheDocument();
     });
 
+    describe('when "triggerEvent" is "hover", focusing the trigger (LG-5488)', () => {
+      const renderTooltipWithProvider = () => {
+        const utils = render(
+          <LeafyGreenProvider>
+            <div data-testid="backdrop" />
+            <Tooltip
+              trigger={<button>{buttonText}</button>}
+              data-testid={tooltipTestId}
+              triggerEvent="hover"
+            >
+              <div>Tooltip Contents!</div>
+            </Tooltip>
+          </LeafyGreenProvider>,
+        );
+
+        const button = utils.getByText(buttonText);
+        const backdrop = utils.getByTestId('backdrop');
+
+        return { ...utils, button, backdrop };
+      };
+
+      test('does not open the tooltip when focus follows mouse usage', async () => {
+        const { queryByTestId, button, backdrop } =
+          renderTooltipWithProvider();
+
+        // Mouse usage sets usingKeyboard to false
+        await userEvent.click(backdrop);
+
+        // Programmatic focus, e.g. focus restored after closing a modal
+        await act(async () => {
+          button.focus();
+          await waitForTimeout(200);
+        });
+
+        expect(button).toHaveFocus();
+        expect(queryByTestId(tooltipTestId)).not.toBeInTheDocument();
+      });
+
+      test('opens the tooltip when focus comes from keyboard navigation', async () => {
+        const { getByTestId, button, backdrop } = renderTooltipWithProvider();
+
+        // Mouse usage sets usingKeyboard to false
+        await userEvent.click(backdrop);
+
+        // Tabbing to the trigger sets usingKeyboard back to true
+        await userEvent.tab();
+
+        expect(button).toHaveFocus();
+        await waitFor(() => getByTestId(tooltipTestId));
+        expect(getByTestId(tooltipTestId)).toBeInTheDocument();
+      });
+    });
+
     async function testTriggerEventWhenDisabled(
       triggerEvent: 'hover' | 'click',
     ) {

packages/tooltip/src/Tooltip/utils/useTooltipTriggerEventHandlers.spec.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react-hooks';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 
 import { TriggerEvent } from '../Tooltip.types';
 import { CALLBACK_DEBOUNCE, DEFAULT_HOVER_DELAY } from '../tooltipConstants';
@@ -11,6 +13,10 @@ const mockMouseEvent = {
   target: document.createElement('div'),
 } as unknown as React.MouseEvent<HTMLElement>;
 
+const mockFocusEvent = {
+  target: document.createElement('div'),
+} as unknown as React.FocusEvent<HTMLElement>;
+
 describe('packages/tooltip/useTooltipTriggerEventHandlers', () => {
   // Common test setup
   const setState = jest.fn();
@@ -115,6 +121,59 @@ describe('packages/tooltip/useTooltipTriggerEventHandlers', () => {
     expect(result.current).toBe(initialHandlers);
   });
 
+  describe('usingKeyboard', () => {
+    test('onFocus opens tooltip when usingKeyboard is true (default)', () => {
+      const onFocus = jest.fn();
+      const hoverArgs: UseTooltipEventsArgs<typeof TriggerEvent.Hover> = {
+        setState,
+        triggerEvent: TriggerEvent.Hover,
+        onFocus,
+      };
+
+      const { result } = renderHook(() =>
+        useTooltipTriggerEventHandlers(hoverArgs),
+      );
+
+      result.current.onFocus(mockFocusEvent);
+
+      expect(onFocus).toHaveBeenCalled();
+      expect(setState).toHaveBeenCalledWith(true);
+    });
+
+    test('onFocus does not open tooltip after mouse usage', () => {
+      const onFocus = jest.fn();
+      const hoverArgs: UseTooltipEventsArgs<typeof TriggerEvent.Hover> = {
+        setState,
+        triggerEvent: TriggerEvent.Hover,
+        onFocus,
+      };
+
+      const { result } = renderHook(
+        () => useTooltipTriggerEventHandlers(hoverArgs),
+        {
+          wrapper: ({ children }: React.PropsWithChildren<unknown>) => (
+            <LeafyGreenProvider>{children}</LeafyGreenProvider>
+          ),
+        },
+      );
+
+      // Mouse usage sets usingKeyboard to false
+      act(() => {
+        document.dispatchEvent(new MouseEvent('mousedown'));
+      });
+
+      result.current.onFocus(mockFocusEvent);
+
+      // Consumer's onFocus handler still fires, but the tooltip does not open
+      expect(onFocus).toHaveBeenCalled();
+      expect(setState).not.toHaveBeenCalled();
+
+      // Blur still closes the tooltip
+      result.current.onBlur(mockFocusEvent);
+      expect(setState).toHaveBeenCalledWith(false);
+    });
+  });
+
   test('only changes identity when args change', () => {
     const hoverArgs: UseTooltipEventsArgs<typeof TriggerEvent.Hover> = {
       setState,

packages/tooltip/src/Tooltip/utils/useTooltipTriggerEventHandlers.ts

@@ -9,6 +9,8 @@ import {
 import { flushSync } from 'react-dom';
 import debounce from 'lodash/debounce';
 
+import { useUsingKeyboardContext } from '@leafygreen-ui/leafygreen-provider';
+
 import { TriggerEvent } from '../Tooltip.types';
 import { CALLBACK_DEBOUNCE, DEFAULT_HOVER_DELAY } from '../tooltipConstants';
 
@@ -29,6 +31,8 @@ export function useTooltipTriggerEventHandlers<Trigger extends TriggerEvent>(
 ): TooltipEventHandlers<Trigger> {
   const { setState, triggerEvent, tooltipRef, isEnabled = true } = args;
 
+  const { usingKeyboard } = useUsingKeyboardContext();
+
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   return useMemo(() => {
@@ -66,7 +70,13 @@ export function useTooltipTriggerEventHandlers<Trigger extends TriggerEvent>(
       const onFocus: FocusEventHandler = (e: FocusEvent<HTMLElement>) => {
         if (isEnabled) {
           args.onFocus?.(e);
-          setState(true);
+
+          // Only open the tooltip on keyboard-driven focus.
+          // Prevents the tooltip from appearing when focus is set
+          // programmatically (e.g. focus restored after closing a modal)
+          if (usingKeyboard) {
+            setState(true);
+          }
         }
       };
 
@@ -98,5 +108,5 @@ export function useTooltipTriggerEventHandlers<Trigger extends TriggerEvent>(
         onClick,
       } as TooltipEventHandlers<Trigger>;
     }
-  }, [args, isEnabled, setState, tooltipRef, triggerEvent]);
+  }, [args, isEnabled, setState, tooltipRef, triggerEvent, usingKeyboard]);
 }