Custom ToolTip goes off screen

Thank you for this great package!

My problem is that my tooltip is always directly above the cursor and goes off the screen when on the very left and right of the chart. I read in #631 that this issue was fixed (the tooltip would go to the left or right of the cursor) for versions 0.60+; however, I don’t see that change.

I am probably missing something simple. Could you please point me in the right direction?

Here’s a picture: https://ibb.co/k4xCmMY

Here’s my code:

const CustomTooltip = ({id, value, data}) => {
    // console.log(nameLookUp)
    return (
        <div style={{width: '300px',maxHeight:'200px'}}>
            <strong>ECO:</strong> {data.eco} <br />
            <strong>Name:</strong>
                {data.name[0]}
            <br />
            <strong>Won:</strong> {data.Won || 0}   <br />
            <strong>Lost:</strong> {data.Lost || 0}
        </div>
        
    )
}

           <Bar
                data={data}
                width={width}
                height={height}
                keys={[ 'Won', 'Lost']}
                indexBy="eco"
                margin={{ top: 50, right: (width > 600) ? 130 : 80, bottom: 50, left: 60 }}
                padding={0.3}
                valueScale={{ type: 'linear' }}
                indexScale={{ type: 'band', round: true }}
                colors={{ scheme: 'nivo' }}
                axisBottom={{
                    tickSize: 5,
                    // tickPadding: 5,
                    tickRotation: -30,
                    legend: 'Openings',
                    legendPosition: 'middle',
                    legendOffset: 40
                }}
                enableGridX
                axisLeft={{
                    tickValues:[...Array(max + 1).keys()],
                    legend: 'Count',
                    legendPosition: 'middle',
                    legendOffset: -30
                }}
                labelSkipHeight={12}
                labelTextColor={{ from: '#000000', modifiers: [ [ 'darker', 1.6 ] ] }}
                tooltip={CustomTooltip}
                legends={[
                    {
                        dataFrom: 'keys',
                        anchor: 'bottom-right',
                        direction: 'column',
                        justify: false,
                        translateX: 120,
                        translateY: 0,
                        itemsSpacing: 2,
                        itemWidth: 100,
                        itemHeight: 20,
                        itemDirection: 'left-to-right',
                        itemOpacity: 0.85,
                        symbolSize: 20,
                        effects: [
                            {
                                on: 'hover',
                                style: {
                                    itemOpacity: 1
                                }
                            }
                        ]
                    }
                ]}
                animate={false}
            />

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, “bump”), and we’ll keep it open. We are sorry that we haven’t been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[luiz-chagas]

I was able to change the anchor by wrapping my custom component in a TooltipWrapper. Even though the position is set to [0, 0], the tooltips do show at the right place. This does not solve this issue but might alleviate some of the pain.

import { TooltipWrapper } from '@nivo/tooltip';

const CustomTooltip = (props?) => (
  <TooltipWrapper anchor="left" position={[0, 0]}>
    {/// your custom JSX here}
  </TooltipWrapper>
);