Tooltip on days in v8

[pptheberge]

We're trying to add a tooltip on certain days in v8. we used to use renderDay and return a  with a title on it in v7. The function used to look at the modifiers (among other things) to generate the title. In v8 the rendering structure has changed and there doesn't seem to be a way to get the modifiers from the formatDay function parameters. Alternatively, the ideal place for the title in v8 seems to be the tag that the days are in. Would there be a way to add a title to this tag?

Thanks in advance

[gpbl]

This is an interesting use case. You can implement a wrapper for the DayContent component.

See https://react-day-picker.js.org/guides/custom-components#wrapping-the-day

For example, in this CodeSandbox: https://codesandbox.io/s/sandpack-project-forked-6omp0b?file=/App.tsx

import { DayContent, DayContentProps, DayPicker } from "react-day-picker";

import { addDays, subDays } from "date-fns";

function DayWithTooltip(props: DayContentProps) {
  return (
    <span title={`${Object.keys(props.activeModifiers)}`}>
      <DayContent {...props} />
    </span>
  );
}

export default function App() {
  const modifiers = {
    yesterday: subDays(new Date(), 1),
    today: new Date(),
    tomorrow: addDays(new Date(), 1)
  };
  return (
    <DayPicker
      components={{ DayContent: DayWithTooltip }}
      modifiers={modifiers}
    />
  );
}

the active modifiers are used to add a "yesterday", "today", "tomorrow" title to the day content. I think you can add more data sources to the custom DayContent (not just modifiers) and render a toolitp from there.

Would this work?

[pptheberge]

Thank you for your quick reply. The structure works great, I can get the modifiers and render a generic tooltip based on the modifiers. What do you mean by passing more data sources? I need to pass extra context information to render the tooltip and I'm not sure what the best way is. It seems like the key is in that sentence.

Thanks again.

[juliankrenz]

@gpbl I have tried this approach for v9.0.0 but it didn't work unfortunately. Is there maybe a better way to solve this for v9?

[pptheberge]

I got it done with react context. Thanks again for your help and great library.