CODEWITHSUNDEEP
reactjstooltipreact-scriptsreact-tooltip
Adithya De Silva
Adithya De Silva

Reputation: 91

React-tooltip doesn't close when mouse leave

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

Upvotes: 7

Views: 7767

Answers (3)

Volodym Dobrov
Volodym Dobrov

Reputation: 31

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.

Upvotes: 1

Hemerson Varela
Hemerson Varela

Reputation: 25792

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

Upvotes: 7

Tarek Hammami
Tarek Hammami

Reputation: 1168

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.

Upvotes: 0

Related Questions