Tooltips do not disappear when I move cursor away from input field

[m21tomas]

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.

[m21tomas]

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.

[aronhelser]

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.

[Jamil-Bailony]

Thanks for mentioning it @m21tomas I have the same issue :(

[nan0hard]

Yeah! facing the same issue.

[Timer91]

Same

my package.json:

{
  "name": "riddler",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.42",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-quill": "^2.0.0-beta.4",
    "react-scripts": "5.0.1",
    "react-tooltip": "^4.2.21",
    "typescript": "^4.7.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[nodgear]

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?

[mikulash]

Hi, I had the similar problem and removing <StrictMode> really did help. But what I find strange is that the strict mode did not really noticed any errors made by the tooltip so I wonder where could be the problem.

[m21tomas]

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.

[DhirajKrVerma]

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".

yes It's Working

[ferdiamg]

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.

[aronhelser]

None of the current "maintainers" are actively developing web apps or this component. We need a community submitted PR to solve this problem.

[sambaneko]

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]

Alternatively, I tried switching to the npm package provided by pdeszynski in #786, and it is working properly for me with strict mode enabled.

[m21tomas]

Alternatively, I tried switching to the npm package provided by pdeszynski in #786, and it is working properly for me with strict mode enabled.

That's an excellent new. Does it work completely the same like Tooltip from [wwayne] and [aronhelser], but also icluding Strict mode? Same syntax and commands?

[sambaneko]

@m21tomas I haven't thoroughly tested it myself, but since it has been submitted as an update for the react-tooltip package, it should support all of the same syntax and commands.

[syed-ahmad]

Try setting isCapture={true}, that fixed tooltip dismissing on scroll in my Nextjs app.

[Ali-Aref]

same issue, any updates ?

[syed-ahmad]

same issue, any updates ?

Did that isCapture={true} not work for you @Ali-Aref ?

[Ali-Aref]

yes I tried, in my case it depends to StrictMode disabling StrictMode makes it work. but, it's not okay to disable StrictMode because of an npm package to work (I'm new to react). So, I am looking for any alternative solutions.. if there are any?

[danielbarion]

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

[aleksspeaker]

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