Calendar: Broken tooltips from version 0.65.0 on

Describe/explain the bug

When I copy the sample code for the ResponsiveCalendar from the webpage verbatim I can’t get tooltips to work on the newest version. After much trying, I downgraded and found out that the last version I can get the tooltips to work is 0.64.0.

Is there a new way of using tooltips that is not documented yet, or a bug?

To Reproduce

From the web page:

const data =
[
  {
    "day": "2018-02-09",
    "value": 6
  },
  {
    "day": "2014-03-03",
    "value": 321
  },
  {
    "day": "2013-06-01",
    "value": 330
  },
  {
    "day": "2018-09-16",
    "value": 177
  },
  {
    "day": "2016-06-08",
    "value": 48
  },
  {
    "day": "2016-12-14",
    "value": 30
  },
  {
    "day": "2014-06-11",
    "value": 123
  }]

const MyResponsiveCalendarCanvas = () => (
    <ResponsiveCalendarCanvas
        data={data}
        from="2013-03-01"
        to="2019-07-12"
        emptyColor="#aa7942"
        colors={[ '#61cdbb', '#97e3d5', '#e8c1a0', '#f47560' ]}
        margin={{ top: 40, right: 40, bottom: 50, left: 40 }}
        direction="vertical"
        monthBorderColor="#ffffff"
        dayBorderWidth={0}
        dayBorderColor="#ffffff"
        legends={[
            {
                anchor: 'bottom-right',
                direction: 'row',
                translateY: 36,
                itemCount: 4,
                itemWidth: 42,
                itemHeight: 36,
                itemsSpacing: 14,
                itemDirection: 'right-to-left'
            }
        ]}
    />
)

Steps to reproduce the behavior:

1. Hover over a colored field

Expected behavior

A tooltip should show up, but it doesn’t from version 0.65.0 on up.

Screenshots

Desktop (please complete the following information):

• OS: Linux
• Browser: chomre, firefox
• Version: 0.65-0.67

[archaeron]

@erceamet I used more or less the same process to “fix” it. Reinstalled multiple times. Deleted the node_modules folder and the package lock and without changing the package.json it fixed itself. No idea what happened 😦

But I’m glad it’s working for you now too

[erceamet]

I’m using:

    "@nivo/bar": "0.67.0",
    "@nivo/calendar": "0.67.0",
    "@nivo/core": "0.67.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "typescript": "3.9.2"

and some others

I should update react and typescript though

Strangely I have the same version of React as you. My only option would probably be to try the calendar package on a newly created and see if it works or not. I will probably open a new issue if that’s the case. Thanks for your informative replies.

EDIT: I have managed to fix it. I did reinitiate the package-lock (again) using npm i --package-lock-only then I have removed any traces of the calendar -> reinstalled only the @nivo/calendar package -> started the app -> added the calendar back. That seemed to have fixed it for me. Strange is the fact that I did this process before and it didn’t seem to have done anything.