renderBlock returns nothing

[bigint]

renderBlock={(block, activity) => <div>{block}</div>}

[grubersjoe]

What are you trying to achieve?

The divs are rendered, but since the calendar is SVG based it is not expected that the <rect /> block elements are wrapped arbitrarily. In this case nothing will be visible, because the SVG will become invalid:

But you can for example add (valid) children to the blocks:

renderBlock={(block, activity) =>
  cloneElement(block, {
    children: <title>{activity.date}</title>,
  })
}

[bigint]

@grubersjoe I'm trying to add tooltip i tried your approach as well its not working 🙇🏼

renderBlock={(block, activity) =>
  cloneElement(block, {
    children: (
      <Tooltip content={`gm`} placement="top">
        {block}
      </Tooltip>
    )
  })
}

[bigint]

renderBlock={(block, activity) => (
          <Tooltip content={`gm`} placement="top">
            {block}
          </Tooltip>
        )}

this one also not working 🙇🏼

[bigint]

This is the tooltip component https://github.com/lensterxyz/lenster/blob/main/packages/ui/src/Tooltip.tsx

I followed the same as in example https://grubersjoe.github.io/react-activity-calendar/?path=/story/react-activity-calendar--tooltips

but it renders nothing 🙇🏼

[bigint]

Any ideas how to fix?

[marcelscruz]

I'm facing a similar issue as @bigint, as I'm wrapping block with Mantine's Tooltip, but hovering on it doesn't trigger the tooltip.

[Cihatata]

Any ideas how to fix?

[grubersjoe]

Hey people. I haven't forgotten about this issue but I've realized from your comments that it seems pretty hard to support the whole variety of tooltip libraries since they're all implemented differently. I will try to come up with a better solution, but in general it seems difficult.

Maybe a "headless" approach where styling is up to the component user would be best. It's a bit more work, but very flexible. Floating UI looks promising for example. react-tooltip also uses it since v5 internally.

[PhilipGrefe]

Has anyone achieved this using the radix-ui tooltip?
It uses Floating UI under the hood IIRC.

[PhilipGrefe]

Has anyone achieved this using the radix-ui tooltip? It uses Floating UI under the hood IIRC.

FYI it can work like this:

const CustomTooltip = ({ children, count, date }: { children: React.ReactNode; count: number; date: string }) => (
  <Tooltip.Root>
    <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
    <Tooltip.Portal>
      <Tooltip.Content sideOffset={10} side="top">
        <div>
          your tooltip content
        </div>
        <Tooltip.Arrow />
      </Tooltip.Content>
    </Tooltip.Portal>
  </Tooltip.Root>
)

Usage in ActivityCalendar

<TooltipProvider>
  <ActivityCalendar
    data={data}
    renderBlock={(block, activity) => (
      <CustomTooltip date={activity.date} count={activity.count}>
        {block}
      </CustomTooltip>
    )}
  />
</TooltipProvider>