fix(toggletip): close on outside click in Safari (#20244)

* fix(toggletip): close on outside click in Safari

* fix(toggletip): apply suggested fix for outside click

---------

Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com>

Author: heloiselui

packages/react/src/components/Toggletip/Toggletip.stories.js

@@ -9,6 +9,7 @@ import { Information } from '@carbon/icons-react';
 import React, { useRef, useEffect } from 'react';
 import { default as Button } from '../Button';
 import { default as Link } from '../Link';
+import Modal from '../Modal';
 import {
   ToggletipLabel,
   Toggletip,
@@ -154,3 +155,34 @@ Default.story = {
     ),
   ],
 };
+
+// I need to remove this
+export const OutsideClickTest = () => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div style={{ padding: '2rem' }}>
+      <Button onClick={() => setOpen(true)}>Launch modal</Button>
+
+      <Modal
+        open={open}
+        onRequestClose={() => setOpen(false)}
+        modalHeading="Test Modal"
+        primaryButtonText="Close">
+        <p>
+          Click the <strong>i</strong> icon to open the Toggletip, then click
+          anywhere in this modal body. The Toggletip should close.
+        </p>
+
+        <Toggletip align="bottom">
+          <ToggletipButton label="Show information">
+            <Information />
+          </ToggletipButton>
+          <ToggletipContent>
+            <p>Toggletip content</p>
+          </ToggletipContent>
+        </Toggletip>
+      </Modal>
+    </div>
+  );
+};

packages/react/src/components/Toggletip/index.tsx

@@ -12,6 +12,7 @@ import React, {
   useContext,
   useRef,
   useState,
+  useEffect,
   type ReactNode,
   type ComponentProps,
   type KeyboardEventHandler,
@@ -173,11 +174,31 @@ export function Toggletip<E extends ElementType = 'span'>({
     }
   });
 
-  useWindowEvent('click', ({ target }) => {
-    if (open && target instanceof Node && !ref.current?.contains(target)) {
-      actions.close();
-    }
-  });
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const targetDocument = ref.current.ownerDocument || document;
+    const eventType: 'pointerdown' | 'mousedown' =
+      'PointerEvent' in window ? 'pointerdown' : 'mousedown';
+
+    const handleOutsideClick = (event: MouseEvent | PointerEvent) => {
+      const node = event.target as Node | null;
+      if (open && node && !ref.current!.contains(node)) {
+        setOpen(false);
+      }
+    };
+
+    const options = { capture: true } as const;
+
+    targetDocument.addEventListener(eventType, handleOutsideClick, options);
+    return () => {
+      targetDocument.removeEventListener(
+        eventType,
+        handleOutsideClick,
+        options
+      );
+    };
+  }, [open]);
 
   return (
     <ToggletipContext.Provider value={value}>