-
-
Notifications
You must be signed in to change notification settings - Fork 1k
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
Comments
We got the same issue in our app, it flickers for like 100ms. |
Has anybody found a fix for this? It is pretty annoying and React 18 has been out for quite a while now. |
I had 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>
);
}} |
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 tailwind.config.js
and then the tooltip prop on the chart:
|
Another way to hotfix it, make tooltip root position as absolute, and set width at the same time:
|
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! |
bump |
bump |
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. |
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. |
Hi guys! Fixed it here in #2480 |
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:
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):
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.The text was updated successfully, but these errors were encountered: