From 0b99e8e029b128e86696a4e7d04944b485ceeccf Mon Sep 17 00:00:00 2001
From: Antoine Clausse <antoine.clausse@overleaf.com>
Date: Mon, 13 Apr 2026 16:41:07 +0200
Subject: [PATCH] Merge pull request #32545 from overleaf/ii-tooltip-flickering

[web] Fix tooltip show and hide

GitOrigin-RevId: 3dfb7189adc5339b635696c9e84bf714a9a353dd
---
 .../frontend/js/shared/components/tooltip.tsx | 10 ++++-
 .../components/shared/tooltip.spec.tsx        | 38 +++++++++++++++++++
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/js/shared/components/tooltip.tsx b/services/web/frontend/js/shared/components/tooltip.tsx
index 1bf2de1be4..971e3c0ecb 100644
--- a/services/web/frontend/js/shared/components/tooltip.tsx
+++ b/services/web/frontend/js/shared/components/tooltip.tsx
@@ -63,6 +63,12 @@ function Tooltip({
     [show, setShow]
   )
 
+  useEffect(() => {
+    if (hidden) {
+      setShow(false)
+    }
+  }, [hidden])
+
   useEffect(() => {
     document.addEventListener('keydown', handleKeyDown, true)
     return () => document.removeEventListener('keydown', handleKeyDown, true)
@@ -97,8 +103,8 @@ function Tooltip({
       {...overlayProps}
       delay={{ show: delayShow, hide: delayHide }}
       placement={overlayProps?.placement || 'top'}
-      show={show}
-      onToggle={setShow}
+      show={hidden ? false : show}
+      onToggle={hidden ? undefined : setShow}
     >
       {overlayProps?.trigger === 'click'
         ? children
diff --git a/services/web/test/frontend/components/shared/tooltip.spec.tsx b/services/web/test/frontend/components/shared/tooltip.spec.tsx
index 18e0e9669c..6e61b32190 100644
--- a/services/web/test/frontend/components/shared/tooltip.spec.tsx
+++ b/services/web/test/frontend/components/shared/tooltip.spec.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
 
 describe('<OLTooltip />', function () {
@@ -61,4 +62,41 @@ describe('<OLTooltip />', function () {
     cy.get('body').type('{esc}')
     cy.findByText(description).should('not.exist')
   })
+
+  it('does not re-show the tooltip when the hidden prop transitions from true to false', function () {
+    const description = 'tooltip content'
+
+    function Wrapper() {
+      const [hidden, setHidden] = useState(false)
+      return (
+        <OLTooltip id="abc" description={description} hidden={hidden}>
+          <button onClick={() => setHidden(h => !h)}>button</button>
+        </OLTooltip>
+      )
+    }
+
+    cy.mount(
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+        }}
+      >
+        <Wrapper />
+      </div>
+    )
+
+    cy.findByRole('button', { name: 'button' }).as('tooltip-btn')
+    cy.get('@tooltip-btn').trigger('mouseover')
+    cy.findByText(description)
+    cy.get('@tooltip-btn').click()
+    cy.findByText(description).should('not.exist')
+    cy.get('@tooltip-btn').trigger('mouseout')
+    cy.get('@tooltip-btn').click()
+    cy.findByText(description).should('not.exist')
+    cy.get('@tooltip-btn').trigger('mouseover')
+    cy.findByText(description)
+  })
 })