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.

[harrynorthover]

But after wrapping my tooltip, it doesn't even shows up now.

I have the same issue here, a fix would be great...

[scio-cypher]

I got over that issue using createPortal function in React.

const CustomTooltip = ({ data, position }) => {
    const tooltipRef = useRef(null); // Reference to the tooltip element
    const [tooltipWidth, setTooltipWidth] = useState(0);

    useEffect(() => {
        if (tooltipRef.current) {
          const rect = tooltipRef.current.getBoundingClientRect();
          setTooltipWidth(rect.width); // Dynamically set the width of the tooltip
        }
    }, [data]); // Recalculate when data changes (i.e., when a new tooltip appears)
    
    return createPortal(
        <div
            ref={tooltipRef}
            style={{ position: 'absolute', top: position.y - 60, left: position.x - (tooltipWidth/2) }}
            className={`${tooltipConfigs.pieConstantClassnames} ${tooltipConfigs.colors.defaults.bgColorClassName} ${tooltipConfigs.colors.defaults.textColorClassName}`}
        >
            <div
                className="absolute font-normal -translate-x-1/2 top-full left-1/2 w-0 h-0 border-l-[6px] border-solid border-l-transparent border-r-[6px] border-r-transparent border-t-[6px] border-t-[#002E64]"
                style={{ filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.1))' }}
            />
            <strong>{data.label}:</strong> {data.value}
        </div>,
        document.body // Renders the tooltip outside the scrollable container
    );
};

@harrynorthover try this

[harrynorthover]

Thanks @scio-cypher - where does the position param come from here?

[scio-cypher]

@harrynorthover You have to maintain state variables. Have a look at this example.

const PieChart = () => {
    const [tooltipData, setTooltipData] = useState(null);
    const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
    return (
        <div className={"w-full"}>
            <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>
                }
                enableArcLinkLabels={false}
                arcLabelsSkipAngle={14}
                layers={['arcs', 'arcLabels', 'arcLinkLabels', 'legends']}
                tooltip={({ datum }) => {
                    setTooltipData(datum);
                    return null; // Prevent the default tooltip rendering
                }}
                onMouseMove={(sliceData, event) => {
                    setTooltipPosition({ x: event.clientX, y: event.clientY });
                }}
                onMouseLeave={() => setTooltipData(null)}
            />
            {tooltipData && (
                <CustomTooltip data={tooltipData} position={tooltipPosition} />
            )}
        </div>
    )
}