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

m21tomas · 2022-06-20T13:04:27Z

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 · 2022-06-20T14:27:41Z

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 · 2022-06-20T15:03:10Z

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 · 2022-06-23T17:56:31Z

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

nan0hard · 2022-07-01T02:49:55Z

Yeah! facing the same issue.

Timer91 · 2022-07-01T08:45:28Z

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 · 2022-07-08T15:00:23Z

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 · 2022-08-22T10:04:52Z

Hi, I had the similar problem and removing 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 · 2022-08-23T09:33:38Z

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 · 2022-09-09T05:02:08Z

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 · 2022-09-09T13:24:14Z

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 · 2022-09-09T17:31:45Z

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

sambaneko · 2022-09-14T23:44:51Z

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 · 2022-09-15T18:08:40Z

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 · 2022-09-16T08:57:58Z

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 · 2022-09-19T21:04:24Z

@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 · 2022-10-06T21:06:14Z

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

Ali-Aref · 2022-10-07T09:22:36Z

same issue, any updates ?

syed-ahmad · 2022-10-07T09:42:12Z

same issue, any updates ?

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

Ali-Aref · 2022-10-07T09:54:13Z

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 · 2022-10-13T15:06:27Z

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

aleksspeaker · 2022-10-13T18:51:45Z

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

mrcMesen mentioned this issue Sep 15, 2022

Not working with NextJS #790

Closed

danielbarion closed this as completed Oct 13, 2022

danielbarion mentioned this issue Oct 13, 2022

Version 4.2.21 on npm outdated? #770

Closed

danielbarion self-assigned this Oct 13, 2022

danielbarion added the Bug label Oct 13, 2022

danielbarion assigned pdeszynski Oct 13, 2022

hbenl mentioned this issue Jan 18, 2023

Upgrade react-tooltip replayio/devtools#8549

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

m21tomas commented Jun 20, 2022 •

edited

Loading

m21tomas commented Jun 20, 2022 •

edited

Loading

aronhelser commented Jun 20, 2022

Jamil-Bailony commented Jun 23, 2022

nan0hard commented Jul 1, 2022

Timer91 commented Jul 1, 2022 •

edited

Loading

nodgear commented Jul 8, 2022

mikulash commented Aug 22, 2022

m21tomas commented Aug 23, 2022 •

edited

Loading

DhirajKrVerma commented Sep 9, 2022

ferdiamg commented Sep 9, 2022 •

edited

Loading

aronhelser commented Sep 9, 2022

sambaneko commented Sep 14, 2022 •

edited

Loading

sambaneko commented Sep 15, 2022

m21tomas commented Sep 16, 2022 •

edited

Loading

sambaneko commented Sep 19, 2022

syed-ahmad commented Oct 6, 2022

Ali-Aref commented Oct 7, 2022

syed-ahmad commented Oct 7, 2022

Ali-Aref commented Oct 7, 2022

danielbarion commented Oct 13, 2022

aleksspeaker commented Oct 13, 2022 •

edited

Loading

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

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

Comments

m21tomas commented Jun 20, 2022 • edited Loading

m21tomas commented Jun 20, 2022 • edited Loading

aronhelser commented Jun 20, 2022

Jamil-Bailony commented Jun 23, 2022

nan0hard commented Jul 1, 2022

Timer91 commented Jul 1, 2022 • edited Loading

nodgear commented Jul 8, 2022

mikulash commented Aug 22, 2022

m21tomas commented Aug 23, 2022 • edited Loading

DhirajKrVerma commented Sep 9, 2022

ferdiamg commented Sep 9, 2022 • edited Loading

aronhelser commented Sep 9, 2022

sambaneko commented Sep 14, 2022 • edited Loading

sambaneko commented Sep 15, 2022

m21tomas commented Sep 16, 2022 • edited Loading

sambaneko commented Sep 19, 2022

syed-ahmad commented Oct 6, 2022

Ali-Aref commented Oct 7, 2022

syed-ahmad commented Oct 7, 2022

Ali-Aref commented Oct 7, 2022

danielbarion commented Oct 13, 2022

aleksspeaker commented Oct 13, 2022 • edited Loading

m21tomas commented Jun 20, 2022 •

edited

Loading

m21tomas commented Jun 20, 2022 •

edited

Loading

Timer91 commented Jul 1, 2022 •

edited

Loading

m21tomas commented Aug 23, 2022 •

edited

Loading

ferdiamg commented Sep 9, 2022 •

edited

Loading

sambaneko commented Sep 14, 2022 •

edited

Loading

m21tomas commented Sep 16, 2022 •

edited

Loading

aleksspeaker commented Oct 13, 2022 •

edited

Loading