The first hover over a Scatter chart point displays the custom tooltip in an incorrect position

[qnpbgood]

The first hover over a Scatter chart point displays the custom tooltip in an incorrect position

[qnpbgood]

return <DefaultTooltipContent payload={payload} {...props} />

Thank you! That's what I was looking for.

[ckifer]

This is specific to when there is a custom Tooltip and it looks to be specifically because of this line

if (!active || !payload || !payload.length) return null;

Remove that and everything works normally

[qnpbgood]

Thanks for the quick response. In my case, I need to check the availability of payload because further logic for outputting data to Tooltip depends on this. As an alternative to returning null, I return any tag with insignificant content and this fixes my problem but seems a bit clunky. Could it be possible to return some default tooltip behavior?

export const CustomizedTooltip: React.FC<TooltipProps<ValueType, NameType>> = ({
  payload,
  active,
}) => {
  if (active && payload && payload.length) {
    // Some logic that depends on payload
    return <div> Tooltip content </div>;
  } else {
    // It's works fine but looks ugly
    return <span>.</span>;
  }
};

Empty tag not work here

[ckifer]

what do you mean it looks ugly? The code looks ugly? The functionality looks the same as it does by default.

I think ideally, we would change the tooltip behavior to not "fly in" like it currently does and just have it appear at the first point and animate from there.

For now you can do this

export const CustomizedTooltip: React.FC<TooltipProps<ValueType, NameType>> = ({
  payload,
  active,
  ...props
}) => {
  if (active && payload && payload.length) {
    // Some logic that depends on payload
    return <div> Tooltip content </div>;
  } 
  return <DefaultTooltipContent payload={payload} {...props} />
};