1

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

Erez Carmel
  • 39
  • 1
  • 7

3 Answers3

4

Try to remove the

<React.StrictMode>
    
  </React.StrictMode>

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

vimuth
  • 5,064
  • 33
  • 79
  • 116
Hafiz
  • 61
  • 4
  • This does seem to solve the problem for me, but can you explain why? When I had `` enabled, I wasn't seeing any warnings in my console. – Tee Sep 22 '22 at 02:26
1

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.

Erez Carmel
  • 39
  • 1
  • 7
0

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

kan
  • 1
  • Welcome to SO! Please take a look at the other answers that were given before. Your approach has already been suggested by Hafiz. In order to keep the site clear and make it easy to find answers, we try to avoid double answers. – ahuemmer Aug 03 '22 at 13:36