[BUG] Tooltip doesn't disappear after button link click on mobile devices

[syntaximus]

Describe the bug
I have navigation header with link buttons with react-tooltips. Buttons svg icon change dynamically to show which one is active. On mobile devices, when I tap the button, first tooltip shows, but after second tap on another button, first tooltip remains and doesn't dissaper.

Version of Package
v5.7.2

To Reproduce

1. go to https://codesandbox.io/s/hungry-villani-g4h8x5 or build that react code and run on mobile device:

index.js:

import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";

import App from "./App";

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

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

app.js:

import "react-tooltip/dist/react-tooltip.css";
import { Tooltip } from "react-tooltip";
import { Link, Route, Routes } from "react-router-dom";
import React from "react";
import "./styles.css";

export default function App() {
  const [activeIconId, setActiveIconId] = React.useState(0);

  const ActiveHomeIcon = () => (
    <svg
      viewBox="0 0 28 28"
      style={{ height: "32px", width: "32px", color: "black" }}
      fill="currentColor"
    >
      <path d="M25.825 12.29C25.824 12.289 25.823 12.288 25.821 12.286L15.027 2.937C14.752 2.675 14.392 2.527 13.989 2.521 13.608 2.527 13.248 2.675 13.001 2.912L2.175 12.29C1.756 12.658 1.629 13.245 1.868 13.759 2.079 14.215 2.567 14.479 3.069 14.479L5 14.479 5 23.729C5 24.695 5.784 25.479 6.75 25.479L11 25.479C11.552 25.479 12 25.031 12 24.479L12 18.309C12 18.126 12.148 17.979 12.33 17.979L15.67 17.979C15.852 17.979 16 18.126 16 18.309L16 24.479C16 25.031 16.448 25.479 17 25.479L21.25 25.479C22.217 25.479 23 24.695 23 23.729L23 14.479 24.931 14.479C25.433 14.479 25.921 14.215 26.132 13.759 26.371 13.245 26.244 12.658 25.825 12.29" />
    </svg>
  );

  const HomeIcon = () => (
    <svg
      viewBox="0 0 28 28"
      style={{ height: "32px", width: "32px", color: "black" }}
      fill="currentColor"
    >
      <path d="M17.5 23.979 21.25 23.979C21.386 23.979 21.5 23.864 21.5 23.729L21.5 13.979C21.5 13.427 21.949 12.979 22.5 12.979L24.33 12.979 14.017 4.046 3.672 12.979 5.5 12.979C6.052 12.979 6.5 13.427 6.5 13.979L6.5 23.729C6.5 23.864 6.615 23.979 6.75 23.979L10.5 23.979 10.5 17.729C10.5 17.04 11.061 16.479 11.75 16.479L16.25 16.479C16.939 16.479 17.5 17.04 17.5 17.729L17.5 23.979ZM21.25 25.479 17 25.479C16.448 25.479 16 25.031 16 24.479L16 18.327C16 18.135 15.844 17.979 15.652 17.979L12.348 17.979C12.156 17.979 12 18.135 12 18.327L12 24.479C12 25.031 11.552 25.479 11 25.479L6.75 25.479C5.784 25.479 5 24.695 5 23.729L5 14.479 3.069 14.479C2.567 14.479 2.079 14.215 1.868 13.759 1.63 13.245 1.757 12.658 2.175 12.29L13.001 2.912C13.248 2.675 13.608 2.527 13.989 2.521 14.392 2.527 14.753 2.675 15.027 2.937L25.821 12.286C25.823 12.288 25.824 12.289 25.825 12.29 26.244 12.658 26.371 13.245 26.133 13.759 25.921 14.215 25.434 14.479 24.931 14.479L23 14.479 23 23.729C23 24.695 22.217 25.479 21.25 25.479Z" />
    </svg>
  );

  return (
    <>
      <ul className="header-central-list">
        <li
          id="home-button"
          className="header-central-list-element"
          onClick={() => setActiveIconId(0)}
        >
          <Link className="central-link-element" to="/">
            {activeIconId === 0 ? <ActiveHomeIcon /> : <HomeIcon />}
          </Link>
        </li>
        <li
          id="home2-button"
          className="header-central-list-element"
          onClick={() => setActiveIconId(1)}
        >
          <Link className="central-link-element" to="/home2">
            {activeIconId === 1 ? <ActiveHomeIcon /> : <HomeIcon />}
          </Link>
        </li>
        <li
          id="home3-button"
          className="header-central-list-element"
          onClick={() => setActiveIconId(2)}
        >
          <Link className="central-link-element" to="/home3">
            {activeIconId === 2 ? <ActiveHomeIcon /> : <HomeIcon />}
          </Link>
        </li>
      </ul>
      <Tooltip anchorId="home-button" content="Home 1" place="bottom" />
      <Tooltip anchorId="home2-button" content="Home 2" place="bottom" />
      <Tooltip anchorId="home3-button" content="Home 3" place="bottom" />
      <Routes>
        <Route path="/" element={<div>Default page</div>} />
        <Route path="/home2" element={<div>Home 2 page</div>} />
        <Route path="/home3" element={<div>Home 3 page</div>} />
      </Routes>
    </>
  );
}

styles.css:

.header-central-list {
  list-style-type: none;
  padding-left: 80px;
  padding-right: 80px;
  justify-content: center;
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}

.header-central-list-element {
  flex-grow: 1;
  max-width: 129.6px;
  min-width: 45px;
}

.central-link-element {
  align-items: top;
  display: flex;
  height: 100%;
  justify-content: center;
}

package.json:

{
  "name": "react",
  "version": "1.0.0",
  "description": "React example starter project",
  "keywords": ["react", "starter"],
  "main": "src/index.js",
  "dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-scripts": "4.0.0",
    "react-tooltip": "5.4.0",
    "react-router-dom": "^6.6.1"
  },
  "devDependencies": {
    "@babel/runtime": "7.13.8",
    "typescript": "4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
}

2. tap several times on random header link buttons - tooltips remain and don't dissapear.

Expected behavior
Tooltip should dissapears after tap on another header link button.

Screenshots

Desktop

• OS: Windows 11
• Browser Chrome 109.0.5414.120 - any mobile device in chrome devtools

Smartphone:

• Device: DN2103
• OS: Android 12
• Browser: Chrome 109.0.5414.117

[danielbarion]

Hi @syntaximus, thanks for the report!
Can you upgrade to the latest version https://github.com/ReactTooltip/react-tooltip/releases and let us know if this issue is still happening, please?
thanks!

[syntaximus]

Hi @danielbarion, thanks for fast answer.
I upgraded react-tooltip to version 5.7.2 and issue is still occurring.

[gabrieljablonski]

There is definitely a bug with react-tooltip here.

Changing the declaration for the icons seemed to fix it, so please try it and let me know: https://codesandbox.io/s/sharp-saha-qq8doy?file=/src/App.js

There's probably some weird interaction between the icon getting rendered multiple times or something like that.
If this becomes a recurring problem, we might investigate it further.

Thanks for letting us know.

[gabrieljablonski]

On a side-note, your use-case would probably work fine with just one tooltip, instead of 3.

I recommend watching #928 so you know if it works out to make it easier to use multiple anchors on the same tooltip.

[syntaximus]

There is definitely a bug with react-tooltip here.

Changing the declaration for the icons seemed to fix it, so please try it and let me know: https://codesandbox.io/s/sharp-saha-qq8doy?file=/src/App.js

There's probably some weird interaction between the icon getting rendered multiple times or something like that. If this becomes a recurring problem, we might investigate it further.

Thanks for letting us know.

I applied your workaround to my application and it works, thanks!
However, I had many svgs declarations for icons in separated module, so this workaround causes a little more complexity in my code.

I investigated what is the diffrence in DOM between our code samples and it looks like in my code svg element re-renders and in your svg element stays the same and only path element re-renders.

Nevertheless, your idea with declaration changing solved my problem, so this bug is not recurring problem for me. Fell free to close this issue if you think it is not worth of further investigating.

[gabrieljablonski]

Good to know. We might get back to this eventually.