React-tooltip: No line break when tooltip text is dynamic

[lovetann]

I would like to have line breaks in my tooltip, but in stead the
is displayed as text, and I can't figure out how to format it correctly. In short my code looks like this:

var tooltiptest = 'this is <br /> a test';

<div data-tip data-for='path'>Path</div>

<ReactTooltip id='path' type='light' multiline={true}>
            <span>{tooltiptest}</span>
 </ReactTooltip>

What am I doing wrong?

[huumanoid]

Hello, @lovetann.

As far as I understand, if <ReactTooltip>'s children is present, it will be passed to ReactTooltip.render as is. You don't event need to set multiline to true.

So, I guess, the problem is that React itself sanitizes tooltiptest's content. Try to use react elements/components instead of plain strings.
Please, let me know is it fine for you.

[huumanoid]

Of course, you've got a second option:

var tooltiptest = 'this is <br /> a test';

<div data-tip={tooltiptest} data-for='path'>Path</div>

<ReactTooltip id='path' type='light' html={true} />

[lovetann]

Thanks for your reply! I ended up by putting the text inside a component.