ReactTooltip.hide doesn't hide tooltip instantly

user_2613340 0
Viewed 2106

I'm trying to create a tooltip using react-tooltip with a close button. According to the documentation, I need to use ReactTooltip.hide but it doesn't seem to work. It hides the tooltip only if I'm moving the cursor out of the tooltip, but not instantly.

Using React 17.0.2, react-tooltip 4.2.21.

Here's a quick CodeSandbox example to see my issue: https://codesandbox.io/s/hidden-star-er2u66

react-tooltip reactjs tooltip javascript
3 Answers

Try to remove the

<React.StrictMode>
    
  </React.StrictMode>

form the index.js and volaa!! you are done.

user_193224100

A quick fix can be found here

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

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

Closing question.

user_26133400

I solved this issue by removing React.StrictMode in index.js file

user_187671620
Related