React-tooltip: Does data-tip support jsx?

[bluetidepro]

Am I missing a setting, or does data-tip not support JSX? I've tried the following, wth html set as true, and not:

<div>
  <div data-tip={<Text>Published!</Text>} data-for='tooltip'><Icon iconName="user" /</div>
  <ReactTooltip html id='tooltip' />
</div>

&

<div>
  <div data-tip={<Text>Published!</Text>} data-for='tooltip'><Icon iconName="user" /</div>
  <ReactTooltip id='tooltip' />
</div>

And when I hover both, I get [ object Object ].

And to clarify, I know if I do the following, it does work:

<ReactTooltip id='tooltip'>
  <Text>Published!</Text>
</ReactTooltip>

But because of the issue with using tooltip's in a modal (Troubleshooting - Using tooltip within the modal), I was hoping to use the data-tip to send the jsx to the tooltip.

Let me know if that makes sense, if you need any other info, or if there is a way to send the jsx through the data-tip. Thanks so much! :)

[dankonino]

Haha was there, colleague pointed me to the tutorial website again. It's the first example ->
you can use it this style
<li data-tip data-for="meeting" > <span> <ReactTooltip className={css.tooltip} place="top" type="light" effect="float" id="meeting" delayHide={2000}> I am actually solving that right now :) check it out here

[bluetidepro]

@dankonino I don't think what you are suggesting will work. As pointed out in my 2nd part, it does work if you add the JSX in the ReactTooltip, but I'm trying to put the JSX in the element that has the tip. In the data-tip. That, I don't think, works.

Hoping I can get an answer or not, may not be able to use this library if that's the case. Any chance you could chime in, @wwayne? Or maybe @huumanoid?

[wwayne]

@bluetidepro data-tip it actually makes use of the dangerouslySetInnerHTML https://github.com/wwayne/react-tooltip/blob/master/src/index.js#L455
So, yes, JSX doesn't work for data-tip

[bluetidepro]

Ah, okay. Thanks for the reply @wwayne!

[srgraham]

If you just want to write html in jsx format so the source looks "cleaner", you can wrap it in ReactDOMServer.renderToStaticMarkup() to convert your jsx to an html string.

import ReactDOMServer from 'react-dom/server';

[wwayne]

@srgraham Sounds a good idea, closing the issue

[augbog]

Hey so I know the renderToStaticMarkup is a valid solution but was just curious if there was a reason to not support JSX via data-tip given the use case originally mentioned?

[wwayne]

@augbog I just thought put JSX inside the ReactTooltip component would be more readable, writing JSX as attribute is kind of confused to me

[MariaNattestad]

My use case involves lots of data points, so the tooltip needs to know information about which data point was hovered on. Supporting JSX or passing through a data object without the string conversion would be appreciated, but here is my workaround:

Pass the data through as text by JSON-stringifying it, and then use getContent to create the JSX:

For example, each data point can pass its data object through using:

let dataPoints = R.compose(
  R.map(d =>
    <circle
      cx={d.x}
      cy={d.y}
      r={radius}
      key={d.id}
      fill={d.color}
      data-for="my-tooltip"
      **data-tip={JSON.stringify(d)}**
    />
  )
)(data);

Then in the tooltip, use getContent to receive the data as text, parse it, and create the desired JSX

<ReactTooltip id={"my-tooltip"} place="bottom" getContent={datumAsText => {
  if (datumAsText == null) {
    return;
  }
  let d = JSON.parse(datumAsText);
  return (<div>
    <p>ID: {d.id}</p>
    <p>Category: {d.category}</p>
  </div>);
}} />

Without using the JSON.stringify, the data object would get converted to a string that is only [ object Object ], but this way we can preserve the information from the original data point.

[PoojaSSW]

@srgraham : So I had the same issue and used your solution to convert jsx into string, however now when I render the tooltip, it comes with html tags. on hover I want to display:
<div><div>Hellow</div><How are you></div></div> , it renders with tag. how to avoid this?

[binomialstew]

```
html={true}
...
/>