How to make a custom Tooltip

[tyler-morales]

I am trying to make a custom Tooltip component instead of using the one you provided.

This is my code, but the squares are not rendering:

<HeatMap
        value={data}
        startDate={new Date(startDate)}
        endDate={new Date(endDate)}
        legendRender={(props) => <rect {...props} y={props.y + 5} rx="2" />}
        rectProps={{
          rx: 2,
        }}
        rectRender={(props, data) => {
          return (
         
            <rect
              {...props}
              onClick={() => {
                setSelected(
                  data.date === selected ? '' : `${data.date} ${data.count}`
                )
              }}
            />
          )
        }}
      />

[jaywcjlove]

@tyler-morales Example https://codesandbox.io/s/react-heat-map-example-forked-m5dn1?file=/src/index.js

[tyler-morales]

Thanks for the quick reply, but I am still unclear on how the custom tool tip is created.

[jaywcjlove]

https://codesandbox.io/embed/sweet-aj-jpl6mx?fontsize=14&hidenavigation=1&theme=dark

import Tooltip from "@uiw/react-tooltip";
import HeatMap from "@uiw/react-heat-map";

const value = [
  { date: "2016/01/11", count: 2 },
  ...[...Array(17)].map((_, idx) => ({
    date: `2016/01/${idx + 10}`,
    count: idx
  })),
  ...[...Array(17)].map((_, idx) => ({
    date: `2016/02/${idx + 10}`,
    count: idx
  })),
  { date: "2016/04/12", count: 2 },
  { date: "2016/05/01", count: 5 },
  { date: "2016/05/02", count: 5 },
  { date: "2016/05/03", count: 1 },
  { date: "2016/05/04", count: 11 },
  { date: "2016/05/08", count: 32 }
];

export default function App() {
  return (
    <div>
      <HeatMap
        value={value}
        width={600}
        startDate={new Date("2016/01/01")}
        rectRender={(props, data) => {
          console.log("props", props);
          // if (!data.count) return <rect {...props} />;
          return (
            <Tooltip placement="top" content={`count: ${data.count || 0}`}>
              <rect {...props} />
            </Tooltip>
          );
        }}
      />
    </div>
  );
}