Custom Tooltip cuts off.

[scio-cypher]

First of all, thanks for creating this library. Its awesome!

I think its already mentioned in #1358 that while hovering on left or right then the tooltip gets cut. In #631 it was supposed to be fixed but no change is visible.

However one work around was provided by @luiz-chagaz in #1358 that wrapping my custom tooltip with TooltipWrapper makes it better. But after wrapping my tooltip, it doesn't even shows up now.

Can you please fix this or give some better workaround.

Case 1: Tooltip gets cut:
Image

Code:

const renderTooltip = ({ datum }) => {
    return (
        <div style={{ background: 'white', padding: '9px 12px', border: '1px solid #ccc', borderRadius: '4px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
            <strong>{datum.label}</strong>: {datum.value}
        </div>
    );
}

<ResponsivePie
    data={pieChartData}
    margin={{ top: 5, right: 0, bottom: 5, left: 0 }}
    innerRadius={0.6}
    padAngle={0.2}
    cornerRadius={1}
    activeOuterRadiusOffset={5}
    arcLabelsComponent={({ datum, label, style }) => 
        <animated.g transform={style.transform} className="cursor-pointer pointer-events-none">
            <text textAnchor="middle" dominantBaseline="central" className="font-medium text-sm">
                {label}
            </text>
        </animated.g>
    }
    colors={({ data }) => (selectedId === null || data.id === selectedId) ? data?.color : getLightGreyShade()}
    enableArcLinkLabels={false}
    onMouseEnter={(slice, event) => {
        event.target.style.cursor = 'pointer';
    }}
    arcLabelsSkipAngle={6}
    activeId={selectedId}
    onClick={handleClick}
    layers={['arcs', 'arcLabels', 'arcLinkLabels', 'legends', CenteredMetric]}
    tooltip={renderTooltip}
/>

Case 2:

Image not providing as tooltip is not visible so it'd look like I'm not even hovering on it.

Code:

const renderTooltip = ({ datum }) => {
    return (
        <TooltipWrapper anchor="left" position={[0, 0]}>
            <div style={{ background: 'white', padding: '9px 12px', border: '1px solid #ccc', borderRadius: '4px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
                <strong>{datum.label}</strong>: {datum.value}
            </div>
        </TooltipWrapper>
    );
}

<ResponsivePie
    data={pieChartData}
    margin={{ top: 5, right: 0, bottom: 5, left: 0 }}
    innerRadius={0.6}
    padAngle={0.2}
    cornerRadius={1}
    activeOuterRadiusOffset={5}
    arcLabelsComponent={({ datum, label, style }) => 
        <animated.g transform={style.transform} className="cursor-pointer pointer-events-none">
            <text textAnchor="middle" dominantBaseline="central" className="font-medium text-sm">
                {label}
            </text>
        </animated.g>
    }
    colors={({ data }) => (selectedId === null || data.id === selectedId) ? data?.color : getLightGreyShade()}
    enableArcLinkLabels={false}
    onMouseEnter={(slice, event) => {
        event.target.style.cursor = 'pointer';
    }}
    arcLabelsSkipAngle={6}
    activeId={selectedId}
    onClick={handleClick}
    layers={['arcs', 'arcLabels', 'arcLinkLabels', 'legends', CenteredMetric]}
    tooltip={renderTooltip}
/>

Thank you in advance! Appreciate it.