Weird position behaviour in dynamic routes

[ricardo-fnd]

Screen.Recording.2023-09-12.at.15.20.18.mov

In this video, you can see that the tooltips are placed correctly, on top and bottom of its anchor elements.
The problem is that when we scroll. they aren't absolute to those elements, but fixed to the page???
Also, when clicking outside and clicking again to show the tooltip, you can see React telling us the tooltip is being rendered on the top left of the page...

I'm using dynamic routes, and when I click in one of those Icons, there's a request made to the server that returns a new DOM (not all DOM, but some components affected by that route). Could this be the problem? The tooltip loses reference to the anchorSelector?

[gabrieljablonski]

Some changes made to the DOM are already watched by the tooltip, but this might be an edge case.

Which version of react-tooltip are you running? Since v5.20.0 we started using floating-ui's autoUpdate() function, so the tooltip should reposition itself correctly on scroll.

Assuming this is a private project that you're unable to share, can you give some insight on your DOM structure? A very simplified example of what it could look like is this:

<App>
  <ReactTooltip />
  <StaticComponents />
  <DynamicComponents />
</App>

One thing you could try is instead of using anchorSelect, try using data-tooltip-id and the other data attributes directly on the anchor elements that change with the route, though this might not be viable depending on how your components are designed (separation of concerns and whatnot).

Worst case scenario, I'll have to ask for a simple demo reproducing this behavior, which unfortunately might be difficult to do depending on the level of complexity of your DOM structure. But for now lets see what we can do.

[ricardo-fnd]

Would you still like some insight of the DOM structure?

[gabrieljablonski]

Would you still like some insight of the DOM structure?

Only if upgrading hasn't solved your issue completely (not just the scrolling), I'm not 100% sure from your previous comment.
If you're good for now, there's no need. If (and when) you run into other issues, then go ahead, it will help a lot with diagnosing.

[ricardo-fnd]

Actually, it solved some of the problems. The scroll problem is now fixed. But, for some reason the top tooltip keeps rendering on the top left of the page, after the first unmount/mount.

This is the current structure:

<div>
    <div>
        <BlueTopBar />
        <GameMap />
    </div>
    <BottomNavbar />
</div>

Inside the main div GameMap:

<GameMap>
    // Here, i'm rendering 30 divs (map strips with those blue icons)
    <div></div>
    // I'm rendering tooltips here because i'm manually controlling `isOpen` with some states that depend on this icons
    <StartHereTooltip isOpen={shouldRenderStartTooltip} />
    <LectureTooltip isOpen={shouldRenderLectureTooltip} hide={hide} /> //onClick tooltip
</GameMap>

First question is: why is the tooltip overflowing outside its parent? (The selected element you see in the following screenshot is <GameMap /> but the tooltip is overflowing to the <BlueTopBar />) Shouldn't the tooltip hit the top of the parent (GameMap), and float to bottom? Keep in mind that I'm using place="top" here.

Second question is. why is react re-rendering the tooltip on the top left of the page? (you can see the react dev tools box as proof)

Screen.Recording.2023-09-12.at.18.27.12.mov

[gabrieljablonski]

The tooltip is definitely losing the references to the anchors when the route changes, so the position defaults to 0,0 on the screen.

One way that has worked in other situations is to force the tooltip to re-render when the route changes, so the tooltip can get the references to the newly rendered components. Assuming you're using react-router-dom or something similar for your routes, try using the key prop. This should force a re-render on route change.

<Tooltip key={location.pathname} {...} />

As for the tooltip overflowing, I believe it's easier to fix the other stuff first, and then get to that.

[ricardo-fnd]

Passing the key prop (that changes when the url changes) worked. It re-renders the tooltip again with the new DOM.

The new problem here is the flickering. When I click a new link, it requests the server for new information, and when the DOM re-renders, there's a tooltip flickering (which is the re-render), which is normal. As you can see, the URL doesn't change immediately, only when the response arrives.

Here, I'm just asking for any advice, if you have any.
Thanks once again.

Screen.Recording.2023-09-13.at.11.37.27.mov

[gabrieljablonski]

The flickering is due to a design limitation on the tooltip. When the anchor element changes between renders (even if it's in the exact same place), we hide the tooltip when recalculating the position. Our most common use cases are usually with less dynamic anchor elements, so this works well most of the time.

I'll try to get back to you later today about the possibility of introducing a new prop which doesn't hide the tooltip during the "detach old anchor"/"attach new anchor" cycle. We hadn't run into this use case before, but I feel like it might come up again in the future, so its worth at least considering.

---

As a saving grace in case that doesn't work out (I'm hopeful it will, but I like preparing for the worse), your last resort would be using the position prop. It might be annoying for you to keep track of the positions of your components manually, but it might be easier than writing your own tooltip from scratch, or even switching to another tooltip package that works better with your dynamic routing.

Just something to keep in mind, but I haven't lost hope just yet.

[ricardo-fnd]

I ended up removing dynamic routes, for this specific case, because they weren't exactly needed. (I was updating the URL, but rendering the same page and the same information, so it was a wrong use of dynamic routes) Though, the implementation of that new prop that disables that hiding, would be a good approach, because I feel that I'm gonna need that in the future. And with dynamic routes, rendering some parts of the DOM, you probably want to keep the tooltip as it was.

[gabrieljablonski]

Aside from the scroll overflowing, have you solved all remaining issues by removing the dynamic routes then? If that's the case, I'll just add the new prop to the backlog and look at it whenever I have the time.

As for the overflowing, from the structure you provided

<div>
  <BlueTopBar />
  <GameMap>
      <div></div>
      <StartHereTooltip />
      <LectureTooltip />
  </GameMap>
</div>

My guess is that <GameMap /> is the scrollable element, right? If that's the case, it should be working correctly from other tests I've done in the past, so it might be a weird interaction with some of your styling. Maybe <BlueTopBar /> is actually absolutely positioned? It's hard to say for sure without seeing the code.

What I can suggest is playing around with z-index, it usually works for me on more niche cases. More specifically, try setting something like z-index: 100 on the top bar, and if it doesn't work, try setting higher/lower values on your other elements (such as the tooltip). You should be able to find something that works.

[ricardo-fnd]

If I remove the key prop, the first tooltip looses reference to the anchor element that re-renders on click.
I don't know why. Both tooltips are being rendered at the same level

[gabrieljablonski]

Again, without a reproducible sample unfortunately it's very hard to give any suggestions.

[ricardo-fnd]

Example The only thing I did was manipulate isOpen manually, depending on state. This makes the tooltip flicker.

[gabrieljablonski]

Not sure if you linked it by accident, but that is the example I linked earlier.

The only thing I did was manipulate isOpen manually

My only guess is that you're switching isOpen from true->false->true quickly when your state changes.

[ricardo-fnd]

Exactly @gabrieljablonski. you can test that in your example, by passing isOpen={show} on <Tooltip />

[gabrieljablonski]

Then the issue is with the logic for your state control. If you set isOpen to false (even if it's just for 1 render cycle), the tooltip will close, and there's nothing we can do about that.