React-tooltip doesn't close when mouse leave

Question

I have used react-tooltip on a login page and set the tooltip to trigger on mouseclick. But I want to tooltip getting off when the mouse leaves the element. I couldn't find a way to do it.

I want this above showed tooltip remove when the mouse leaves element.

Here's the npm package I used. https://www.npmjs.com/package/react-tooltip

Answer 1

After upgrade my app to react 18 I faced this issue.

It looks the package react-tooltip is not support react 18 yet.

As a workaround 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);
   }}
 />
</>

Answer 2

I tried the example "Custom event" from React Tooltip examples:

<a data-tip='custom show' data-event='click focus'>( •̀д•́)</a>
<ReactTooltip globalEventOff='click' />
<a data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>
<ReactTooltip/>

No it doesn't work - React-tooltip doesn't close.

But if we remove <React.StrictMode> from root of our app, it will work fine.