Merge pull request #32545 from overleaf/ii-tooltip-flickering

[web] Fix tooltip show and hide

GitOrigin-RevId: 3dfb7189adc5339b635696c9e84bf714a9a353dd

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)
+  })
 })