Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip Jitter On Initial Render #2161

Closed
tony-cocco opened this issue Oct 12, 2022 · 12 comments
Closed

Tooltip Jitter On Initial Render #2161

tony-cocco opened this issue Oct 12, 2022 · 12 comments

Comments

@tony-cocco
Copy link

Describe/explain the bug
Initial tooltip render appears to the bottom right of the cursor before snapping into place.

To Reproduce
https://codesandbox.io/s/nivo-tooltip-flicker-consistency-yoln21?file=/src/index.js

Issue can be seen in the codesandbox. The top chart tooltip flickers when entering the chart while the bottom one doesn't. This is also true when no custom tooltip property is set. Both divs are rendering the same pie chart just using a different method. I've also confirmed the issue still happens when only 1 chart is present (the rendering method is the only thing that changes the behavior). This flicker is also present in my nextjs application.

Steps to reproduce the behavior:

  1. Go to sandbox link
  2. View tooltip on top chart
  3. View tooltip on bottom chart

Expected behavior
Both tooltips should function the same.

Screenshots

Screen.Recording.2022-10-12.at.3.17.56.PM.mov

Desktop (please complete the following information):

  • OS: Windows 10 and OS 12.6
  • Browser: Chrome
  • Version: Version 106.0.5249.119 (Official Build) (64-bit), Version 105.0.5195.125 (Official Build) (x86_64)

Additional context
Hopefully this is maybe a silly config issue somewhere, but I could not identify any difference other than render method. The codesandbox console does display Warning: ReactDOM.render is no longer supported in React 18..., which appears to be from the bottom chart that is working correctly.

@posabsolute
Copy link

We got the same issue in our app, it flickers for like 100ms.

@evaK-de
Copy link

evaK-de commented Dec 19, 2022

Has anybody found a fix for this? It is pretty annoying and React 18 has been out for quite a while now.

@posabsolute
Copy link

I had to hide it for the first few MS.

@avgupta456
Copy link

avgupta456 commented Dec 23, 2022

I'm also running into this issue... Could you share a bit on how you managed to hide it for the first few ms?

This worked for me (using TailwindCSS)

tooltip={({ id, data, value, color }) => {
  setTimeout(() => {
    const tooltip = document.getElementById("bar-tooltip");
    if (tooltip) {
      tooltip.classList.remove("invisible");
    }
  }, 200);
  return (
     <strong
      id="bar-tooltip"
      style={{ color }}
      className="invisible bg-white p-2 rounded text-sm"
    >
      {data["team"]} {id}: {value}
    </strong>
  );
}}

@charesbast
Copy link

charesbast commented Mar 22, 2023

I guess this repo is not maintained anymore so I'm not sure that bug will be fixed any time soon

A slightly better solution (to avoid using a timeout) is to use CSS animation to change the div visibility from hidden to visible after a 200ms delay.
This is how to do it using tailwind:

tailwind.config.js

    ...
    extend: {
      keyframes: {
        makeVisible: {
          "0%": {
            visibility: "hidden",
          },
          "100%": {
            visibility: "visible",
          },
        },
      },
      animation: {
        appear: "makeVisible 0ms linear 200ms forwards",
      },
    },
  },

and then the tooltip prop on the chart:

tooltip={({ datum }) => (
  <div className="animate-appear invisible bg-white p-2 shadow">
    <p>{datum.value}<p>
  </div>
)}

@CyrusNG
Copy link

CyrusNG commented May 12, 2023

Another way to hotfix it, make tooltip root

position as absolute, and set width at the same time:

tooltip={(bar) => (
  <div className="position-absolute" style={{"min-width":"120px", "transform":"translate(-50%, -100%)"}}>
    <strong>Hello World</span>
  </div>
)}

@stale
Copy link

stale bot commented Aug 12, 2023

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@stale stale bot added the stale label Aug 12, 2023
@robin-leach
Copy link

bump

@stale stale bot removed the stale label Aug 14, 2023
@EmilianoMorghen
Copy link

bump

@arackaf
Copy link

arackaf commented Sep 6, 2023

I guess this repo is not maintained anymore so I'm not sure that bug will be fixed any time soon

Can anyone confirm that? From most of the issues I've seen, it's one dude managing this project. Has he just moved on? Understandable if so, but good to know.

Most recent commits appear to be from 4 months ago.

@posabsolute
Copy link

Looks like it is still somewhat maintained, @plouc seems to be the main dev, but I am guessing someone would need to create a patch to get it merged in.

@DimaAmega
Copy link
Contributor

DimaAmega commented Dec 2, 2023

Hi guys! Fixed it here in #2480

@plouc plouc closed this as completed Mar 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests