Tooltips do not disappear when I move cursor away from input field

I’m writing forms and I need to check if input is valid. But right now I’m testing how your Tooltips work in general. It doesn’t work properly for me. Either I’m doing smth wrong or your tooltip is wrong. I have this code:

import React, { useState } from 'react';
//...
import ReactTooltip from 'react-tooltip';
//....
function AddNewCanteen() {

return (
            <div>
            <form onSubmit={handleSubmit}>
                <h6 className="py-3">
                    <b>Pridėti naują maitinimo įstaigą:</b>
                </h6>
                <div className="form-group" style={{ position: 'relative', width: '95%' }}>
                    <label htmlFor="name">
                        Pavadinimas <span className="fieldRequired">*</span>
                    </label>
                    <a data-tip data-for='global'>
                        <input
                            type="text"
                            className="form-control mt-2"
                            name="name"
                            id="id_name"
                            value={duomenys.name}
                            onChange={handleChange}
                            onInvalid={validateField}
                            style={
                                duomenys.name.length > 0 ? infoValid.name ? { border: "1px solid lightgray" }
                                    : { border: "2px solid red" }
                                    : { border: "1px solid lightgray" }
                            }
                            required
                            pattern="^[A-ZĄ-Ž]{1}[\S\s]{1,64}$"
                            maxLength={64}
                            data-toggle="tooltip"
                            data-placement="top"
                            title="Įveskite maitinimo įstaigos pavadinimą"
                        />
                    </a>
                    <ReactTooltip id='global' aria-haspopup='true' delayHide={1000} >
                        <p>This is a global react component tooltip</p>
                        <p>You can put every thing here</p>
                        <ul>
                            <li>Word</li>
                            <li>Chart</li>
                            <li>Else</li>
                        </ul>
                    </ReactTooltip>

                    {duomenys.name.length > 0 ? infoValid.name ? <span className="approvemsg"><FontAwesomeIcon icon={faCheck} /></span>
                        : <span className="warningmsg"><FontAwesomeIcon icon={faXmark} /></span>
                        : <span className="approvemsg"></span>}
                    <br></br>
                </div>
                
                //.....
                </div>
          );
}
export default AddNewCanteen;

What is wrong with it? Why the tooltip doesn’t disappear when I move mouse cursor away? Why does it remain forever? That really annoys.

[m21tomas]

I had to change this:

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<StrictMode>
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <Switch>
      <StyledEngineProvider injectFirst>
        <Route path="*" component={App} />
      </StyledEngineProvider>
    </Switch>
  </BrowserRouter>
</StrictMode>

to this:

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <Switch>
      <StyledEngineProvider injectFirst>
        <Route path="*" component={App} />
      </StyledEngineProvider>
    </Switch>
  </BrowserRouter>

In other words to remove Strict mode.

[ferdiamg]

Same here, and can confirm: Removing the strict mode makes the tooltips work again. However its not advised to disable the strict mode just to make a npm package work.

For debugging: “next”: “12.1.6”, “react”: “18.2.0”, “react-dom”: “18.2.0”, “react-tooltip”: “^4.2.21”, “tailwindcss”: “^3.1.3”, “typescript”: “4.7.3”

I think its somehow related to the eventOff and globalEventOff in react-tooltip. As far as I understood it from looking at the implementation real quick: theres a global custom event thats being listened on to decide when to hide the tooltip. Apparently its not being fired (or fired too often) when strict mode is on and thus the tooltip behaves weirdly. I somehow can’t console.log from within node_module so I can’t confirm my suspicion just yet. Should definitely be related to React 18’s new strict mode though as functional components, initializiers and updaters are being run twice. Somehow the event catching does seem to break here.