7

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.

enter image description here

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

Dan Bonachea
  • 2,408
  • 5
  • 16
  • 31
Adithya De Silva
  • 91
  • 1
  • 4

3 Answers3

7

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);
   }}
 />
</>
Hemerson Varela
  • 24,034
  • 16
  • 68
  • 69
  • 1
    remove Strict mode and then try – Umanda Oct 06 '22 at 06:53
  • 2
    My team ran into the same issue after upgrading our app to React 18. Upgrading react-tooltip to v4.4.3 fixed the issue for us. See https://github.com/ReactTooltip/react-tooltip/issues/769#issuecomment-1278179547 – Santos Solorzano Nov 03 '22 at 18:16
1

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.

Volodym Dobrov
  • 31
  • 2
0

You can read about the data-event-off attribute to set custom event that hides the tooltip on the react-tooltip GitHub repository.
These examples might be useful for your case.

Tarek Hammami
  • 840
  • 9
  • 12
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 26 '22 at 19:25