react-tooltip: Tooltips do not disappear when I move cursor away from input field

I’m writing forms and I need to check if input is valid. But right now I’m testing how your Tooltips work in general. It doesn’t work properly for me. Either I’m doing smth wrong or your tooltip is wrong. I have this code:

import React, { useState } from 'react';
//...
import ReactTooltip from 'react-tooltip';
//....
function AddNewCanteen() {

return (
            <div>
            <form onSubmit={handleSubmit}>
                <h6 className="py-3">
                    <b>Pridėti naują maitinimo įstaigą:</b>
                </h6>
                <div className="form-group" style={{ position: 'relative', width: '95%' }}>
                    <label htmlFor="name">
                        Pavadinimas <span className="fieldRequired">*</span>
                    </label>
                    <a data-tip data-for='global'>
                        <input
                            type="text"
                            className="form-control mt-2"
                            name="name"
                            id="id_name"
                            value={duomenys.name}
                            onChange={handleChange}
                            onInvalid={validateField}
                            style={
                                duomenys.name.length > 0 ? infoValid.name ? { border: "1px solid lightgray" }
                                    : { border: "2px solid red" }
                                    : { border: "1px solid lightgray" }
                            }
                            required
                            pattern="^[A-ZĄ-Ž]{1}[\S\s]{1,64}$"
                            maxLength={64}
                            data-toggle="tooltip"
                            data-placement="top"
                            title="Įveskite maitinimo įstaigos pavadinimą"
                        />
                    </a>
                    <ReactTooltip id='global' aria-haspopup='true' delayHide={1000} >
                        <p>This is a global react component tooltip</p>
                        <p>You can put every thing here</p>
                        <ul>
                            <li>Word</li>
                            <li>Chart</li>
                            <li>Else</li>
                        </ul>
                    </ReactTooltip>

                    {duomenys.name.length > 0 ? infoValid.name ? <span className="approvemsg"><FontAwesomeIcon icon={faCheck} /></span>
                        : <span className="warningmsg"><FontAwesomeIcon icon={faXmark} /></span>
                        : <span className="approvemsg"></span>}
                    <br></br>
                </div>
                
                //.....
                </div>
          );
}
export default AddNewCanteen;

What is wrong with it? Why the tooltip doesn’t disappear when I move mouse cursor away? Why does it remain forever? That really annoys.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 21 (1 by maintainers)

Most upvoted comments

I had to change this:

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<StrictMode>
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <Switch>
      <StyledEngineProvider injectFirst>
        <Route path="*" component={App} />
      </StyledEngineProvider>
    </Switch>
  </BrowserRouter>
</StrictMode>

to this:

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <Switch>
      <StyledEngineProvider injectFirst>
        <Route path="*" component={App} />
      </StyledEngineProvider>
    </Switch>
  </BrowserRouter>

In other words to remove Strict mode.

+11

m21tomas on Sep 12, 2022

Same here, and can confirm: Removing the strict mode makes the tooltips work again. However its not advised to disable the strict mode just to make a npm package work.

For debugging: “next”: “12.1.6”, “react”: “18.2.0”, “react-dom”: “18.2.0”, “react-tooltip”: “^4.2.21”, “tailwindcss”: “^3.1.3”, “typescript”: “4.7.3”

I think its somehow related to the eventOff and globalEventOff in react-tooltip. As far as I understood it from looking at the implementation real quick: theres a global custom event thats being listened on to decide when to hide the tooltip. Apparently its not being fired (or fired too often) when strict mode is on and thus the tooltip behaves weirdly. I somehow can’t console.log from within node_module so I can’t confirm my suspicion just yet. Should definitely be related to React 18’s new strict mode though as functional components, initializiers and updaters are being run twice. Somehow the event catching does seem to break here.

ferdiamg on Sep 9, 2022

Hi guys, the release v4.3.0 enables support for React 18 and Next.js strict mode, thanks to @pdeszynski.

danielbarion on Oct 13, 2022

Umm, yea, that’s not productive. If you have a suggestion for improving, make it.

None of the current maintainers are actively working on this component. If you want a fix, contribute a PR.

aronhelser on Jun 20, 2022

It looks like a similar issue was already fixed and merged (#755), but the npm package is not up to date with those changes? Can the npm package be updated?

sambaneko on Sep 15, 2022

I had to change this:

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<StrictMode>
  <BrowserRouter forceRefresh basename={process.env.PUBLIC_URL}>
    <Switch>
      <StyledEngineProvider injectFirst>
        <Route path="*" component={App} />
      </StyledEngineProvider>
    </Switch>
  </BrowserRouter>
</StrictMode>

to this:

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter forceRefresh basename={process.env.PUBLIC_URL}>
    <Switch>
      <StyledEngineProvider injectFirst>
        <Route path="*" component={App} />
      </StyledEngineProvider>
    </Switch>
  </BrowserRouter>

In other words to remove Strict mode. Shame on you creators “developers”.

are your really shaming someone who made something for free and you’re using? like… wth?

yes I did. Sorry for that. I won’t blame anymore.

m21tomas on Sep 12, 2022

I’ve tested it on v4.3.1. Tooltips do disappear now when I move the cursor away from the target.

aleksspeaker on Oct 13, 2022

I had to change this:

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<StrictMode>
  <BrowserRouter forceRefresh basename={process.env.PUBLIC_URL}>
    <Switch>
      <StyledEngineProvider injectFirst>
        <Route path="*" component={App} />
      </StyledEngineProvider>
    </Switch>
  </BrowserRouter>
</StrictMode>

to this:

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter forceRefresh basename={process.env.PUBLIC_URL}>
    <Switch>
      <StyledEngineProvider injectFirst>
        <Route path="*" component={App} />
      </StyledEngineProvider>
    </Switch>
  </BrowserRouter>

In other words to remove Strict mode. Shame on you creators “developers”.

are your really shaming someone who made something for free and you’re using? like… wth?

nodgear on Jul 8, 2022