Custom TooltipComponent is not working

[guiracine]

Hi, thank you for the great library!

I was up and running pretty fast but I spent most of my time trying to integrate a custom tooltip like https://react-joyride.com/custom

The issue is that it seems that the joyride code never sets my tooltip component, self.tooltip is always null when I debug the joyride code.
If I comment the tooltipComponent customization everything works fine with the default one.
I must do a simple error but I cannot find where.
=> Could you please check what I am doing wrong ?

Here is the code of my dead simple tooltip:
"react-joyride": "^2.3.1",

import JoyRide, { TooltipRenderProps } from "react-joyride";

const steps = [
  {
    target: "#test1",
    content: "test1.",
  },
  {
    target: "#test2",
    content: "test2."
  }

const CustomTooltip = (props: TooltipRenderProps) => {
  return (
      <div>{props.step.content}</div>
  );
}

const Onboarding = () => {  
  return (
    <>
      <JoyRide
        steps={steps}
        tooltipComponent={CustomTooltip}
        }}
      />
    </>
  );
};

export default Onboarding;

[gilbarbara]

hey @guiracine

Have you checked the documentation and the example code?
https://docs.react-joyride.com/custom-components
https://codesandbox.io/s/github/gilbarbara/react-joyride-demo

[guiracine]

Hi @gilbarbara thanks for the answer.
Yes I did read the documentation, but looking at your codebox example I realized that my mistake was that I did not pass tooltipProps to my top level container! Also I did not understand that I could pass a react node instead of plain text in my step.content definition. I think the doc should add such example to be more clear.

Thanks!