[BUG] Issues when using the tooltip with `react-router-dom`

[alexb148]

Describe the bug
If I add a tooltip to an element within a NavLink (i.e. a link to another route within a React app) and I tap the element, I go to the linked route (as expected) but the tooltip then appears in the top left corner of the screen. Presumably in the top left as the element that triggered the tooltip is no longer on the page.

It'd probably be good if tooltips didn't show if the trigger element no longer exists on the page. Or if tooltips disappeared after navigating to a new page. Or if there was a manual way to instantly hide all tooltips, that we could implement ourselves after navigating to a new page. Or perhaps if there was an optional attribute to disable a tooltip on touch, if we know it's inside of a link.

Essentially I want the tooltip on hover on desktop, but on touch screens where hover doesn't exist, I simply want the NavLink to work without triggering the tooltip.

Thanks for any help.

Version of Package
v5.8.3

To Reproduce
Add tooltip attributes to a div or other element within a NavLink.

Expected behavior
I would expect the tooltip to simply not show if instantly navigating to a new route after tapping an element.

Smartphone (please complete the following information if possible or delete this section):

• Device: iPhone 12
• OS: iOS 16.3.1
• Browser: Safari
• Frameworks: react 18.2.0, react-router-dom 5.3.4

[gabrieljablonski]

I would expect the tooltip to simply not show if instantly navigating to a new route after tapping an element.

We don't support that behavior natively, but you could achieve something like that by using the delayShow prop with a small value (100~150 ms), or by simply disabling the tooltip on mobile.

It'd probably be good if tooltips didn't show if the trigger element no longer exists on the page.

This should already be the case, it definitely looks like a bug. Do you mind setting up a CodeSandbox or a small sample project reproducing the problem? It would help a lot with debugging.

[alexb148]

Thanks for the quick response!

Unfortunately adding a delay doesn't solve the issue, and disabling on mobile isn't ideal as tablets and laptops with input devices can also have touchscreens.

Here is a CodeSandbox that reliably creates the issue for me. Notably here it doesn't happen on the very first link tap, but it does on subsequent taps when toggling between the 2 routes a few times.

In fact I have noticed it happens here on desktop Chrome also, if you manage to click the link before the delay finishes (try extending the delay to replicate more)

https://codesandbox.io/s/react-tooltip-i388xj?file=/src/Home.js

Screenshot attached of the tooltip appearing in the top left of the screen.

[gabrieljablonski]

Yep, definitely a bug. Thought it would be an easy fix, but it seems it will take some investigating.

For now, you can work around the issue by setting the key prop for the tooltip component to the location key, which will force a re-render when the location changes. You should also be able to remove the delayShow and have it work fine on mobile,
though the tooltip will still show if you touch and hold the link instead of simply clicking it. If this behavior is not desired, we can suggest some alternatives around it.

Personally it doesn't feel super hacky, so it should be fine.

import { Route, Switch, useLocation } from "react-router-dom";
import { Tooltip } from "react-tooltip";
import Home from "./Home";
import About from "./About";

import "./styles.css";
import "react-tooltip/dist/react-tooltip.css";

export default function App() {
  const location = useLocation();
  return (
    <>
      <Switch>
        <Route path="/" exact render={(props) => <Home />} />
        <Route path="/about" render={(props) => <About />} />
      </Switch>
      <Tooltip
        // set tooltip key
        key={location.key}
        id="primaryTooltip"
        place="top"
      />
    </>
  );
}

[alexb148]

Thanks for the update, I can confirm that using key={location.key} does successfully work around the issue.

[gabrieljablonski]

Finally got around to it. react-tooltip@5.10.5-beta.996.1 should fix this.

Soon we'll do an official release and using key={location.key} will no longer be necessary.

[gabrieljablonski]

Fixed on the official release react-tooltip@5.10.5.