Tooltip on days in v8 #1416
-
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 |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
This is an interesting use case. You can implement a wrapper for the 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 Would this work? |
Beta Was this translation helpful? Give feedback.
-
I got it done with react context. Thanks again for your help and great library. |
Beta Was this translation helpful? Give feedback.
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