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:

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

• javascript
• reactjs
• tooltip
• react-tooltip

3 Answers 3

Try to remove the

<React.StrictMode>
    
  </React.StrictMode>

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

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.

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