From 0dfb7c4e054cae01e46acaa7d9e118926c5f43dc Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 27 Jun 2025 13:45:12 -0500
Subject: [PATCH] Make sure web tooltip closes on interaction with target

---
 src/components/Tooltip/index.web.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Tooltip/index.web.tsx b/src/components/Tooltip/index.web.tsx
index 739a714cd4..fc5808d7ad 100644
--- a/src/components/Tooltip/index.web.tsx
+++ b/src/components/Tooltip/index.web.tsx
@@ -13,10 +13,12 @@ import {Text} from '#/components/Typography'
 
 type TooltipContextType = {
   position: 'top' | 'bottom'
+  onVisibleChange: (open: boolean) => void
 }
 
 const TooltipContext = createContext<TooltipContextType>({
   position: 'bottom',
+  onVisibleChange: () => {},
 })
 
 export function Outer({
@@ -30,7 +32,10 @@ export function Outer({
   visible: boolean
   onVisibleChange: (visible: boolean) => void
 }) {
-  const ctx = useMemo(() => ({position}), [position])
+  const ctx = useMemo(
+    () => ({position, onVisibleChange}),
+    [position, onVisibleChange],
+  )
   return (
     <Popover.Root open={visible} onOpenChange={onVisibleChange}>
       <TooltipContext.Provider value={ctx}>{children}</TooltipContext.Provider>
@@ -54,7 +59,7 @@ export function Content({
   label: string
 }) {
   const t = useTheme()
-  const {position} = useContext(TooltipContext)
+  const {position, onVisibleChange} = useContext(TooltipContext)
   return (
     <Popover.Portal>
       <Popover.Content
@@ -63,6 +68,7 @@ export function Content({
         side={position}
         sideOffset={4}
         collisionPadding={MIN_EDGE_SPACE}
+        onInteractOutside={() => onVisibleChange(false)}
         style={flatten([
           a.rounded_sm,
           select(t.name, {