ReactTooltip won't hide

[MarshyMadness]

Tooltip never closes and if another one shows up then both are on screen so with many tooltips the screen becomes unreadable

[amirho1]

I think u are using react 18 a solution is to downgrade to react 17

[Raymond-OJam]

Is there a plan to support React 18? This only occurs in Development Strict Mode. ReactTooltip works fine in Production code with React 18.

[svmszcck]

As a quick fix you can do this until the package is updated:

const [tooltip, showTooltip] = useState(true);

<>
 {tooltip && <ReactTooltip effect="solid" />}
 <p
   data-tip="hello world"
   onMouseEnter={() => showTooltip(true)}
   onMouseLeave={() => {
     showTooltip(false);
     setTimeout(() => showTooltip(true), 50);
   }}
 />
</>

[hoainamcr]

Is there a plan to support React 18? This only occurs in Development Strict Mode. ReactTooltip works fine in Production code with React 18.

Exactly, it runs normally if we remove Strict Mode in root app, of React 18.

[j-francisco]

You can place ReactTooltip outside of React.StrictMode, for example:

<>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  <ReactTooltip />
</>

[hoainamcr]

You can place ReactTooltip outside of React.StrictMode, for example:

<>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  <ReactTooltip />
</>

Yeah, this solution is Ok for general case, but in the special cases we have ro define the the tooltip component in each components. it is happen the same above while development :D

[danielbarion]

Hi guys, the release v4.3.0 enables support for React 18 and Next.js strict mode, thanks to @pdeszynski.