React-tooltip: data-tip only support string?

[duckscofield]

I have structure layout issue, so I use 'data-tip' to pass content into <ReactTooltip />, like <img />, but it will show [object object]. If I put data-tip="<div>test</div>", it will get the same result [object object]. Is it possible to add the feature?

[ioan-ungurean]

Is this what you are looking for? That's already implemented. Check the spec.

[duckscofield]

cool! It works, thank you

[paulcredmond]

@duckscofield How did you get this to work? I'm having the same problem. I tried the html={true} as posted above but I get the same result.

[duckscofield]

@paulcredmond
In my case, I use the code like as bellows:

...
data-for="one id name"
data-html
data-tip={
<img src="" alt=""/>
}
...
/>

[paulcredmond]

Thanks for the reply @duckscofield

Mine is a little more complicated as I have unparsed tags, but I figured it out using the following:

 const unParsedHtml = "<p>Thank you for your message</p>";
 const htmlDecode = (input) => {
      const e = document.createElement('div');
      e.innerHTML = input;
      return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
 }

<ReactTooltip class="react-tooltips" place="right" effect="solid">
    <div dangerouslySetInnerHTML={{ __html: htmlDecode(unParsedHtml) }} />
</ReactTooltip>

[pjisha]

It doesn't work for me either. Displays [object Object]. Tried setting data-html to true. But still no luck.

[pjisha]

Found this thread - https://github.com/wwayne/react-tooltip/issues/329. The data-tip doesn't support jsx.