`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>

[mikedidthis]

Below should work with the Tooltip component from react-aria-components:

import {Button, Tooltip, TooltipTrigger} from 'react-aria-components'

const Activity = () => (
    <ActivityCalendar
        renderBlock={(block) => (
            const { x, y, width, height, rx = 0, fill, style } = block.props

            <foreignObject
                x={x}
                y={y}
                height={height}
                width={width}
            >
                <TooltipTrigger>
                    <Button
                        className="w-full h-full block cursor-pointer box-border"
                        style={{
                            backgroundColor: fill,
                            borderRadius: `${rx}px`,
                            border: `1px solid ${style?.stroke}`
                        }}
                    />
                    <Tooltip>
                        ...
                    </TooltipPopover>
                </TooltipTrigger>
            </foreignObject>
        )}
    />
)

tl;dr - Take the position props from <rect> and apply them to <foreignObject> and the style props from <rect> and apply them to <Button>.