React-tooltip: Best way to display multiple data in tooltip

[AdrienLemaire]

I would like to show a title and a description in each of my tooltips.
Something like below:

        {badges.map(badge => (
          <FlexCol xs={4} sm={3} className="badge" key={badge.pk}>
            <img
              className="badge-image"
              src={urljoin(MEDIA_URL, badge.imageUrl)}
              alt={badge.name}
              data-multiline
              data-tip={badge}
              data-for="badge-tooltip"
            />
            <ReactTooltip
              id="badge-tooltip"
              getContent={({name, description}) => (
                <React.Fragment>
                  <p>
                    <strong>{name}</strong>
                  </p>
                  <p>{description}</p>
                </React.Fragment>
              )}
            />
          </FlexCol>
        }

The problem is, html5 data attributes only seem to handle strings, so we cannot send arrays or objects to it.
I currently cannot see any other solution than concatenating my 2 data items in data-tip, when split it within getContent, which is far from optimal.

Would it be possible to handle any data-tip-* attribute for me to set data-tip-name and data-tip-description attributes, and easily reuse them from getContent ?

[aronhelser]

I know there was a recent PR to pass the value of data-tip into getContent. If you use the most recent, then 'badge' should get passed in, and you could reference badge.name and badge.description inside getContent().

Please try that, thanks!

[oladhari]

yes it is working ! thank you

[AdrienLemaire]

@aronhelser sorry, I closed without verifying due to @oladhari's comment, but this doesn't work. I had raised the issue using v3.8.0, and it's still broken with v3.8.1.
As explained in the issue description, only a string can be given to getContent. We would like arrays or objects to be supported as well, to have a smaller/cleaner code footprint using the react-tooltip plugin.

[oladhari]

it is my mistake, I did not verify passing the object, while trying to pass an object i got this error:
Uncaught TypeError: Cannot read property 'name' of null

[ketysek]

If I'll pass an object, it's automatically converted to string "[object Object]"...

[mtsalenc]

@ketysek I experience the same thing. Did you find a solution?

[oladhari]

@mtsalenc
here the solution that we came with
we created a function that handle the content in a customized component for the tooltip:

  handleContent = dataTip => {
    ReactTooltip.rebuild();
    if (!dataTip) {
      return "";
    }
    const [name, description] = dataTip.split("|");


    return description ? (
      <p>
        <strong>{name}</strong> <br />
        {description}
      </p>
    ) : null;
  };

in the component using the tooltip you just pass the data-tip like this:

data-tip={`${name}|${description}`}

hope it is helpful

[oriuken]

I did something very similar but using _JSON.parse_ and _JSON.stringify_ so I can manage the whole element and have more flexibility.

So instead of using
const [name, description] = dataTip.split("|");
I did something like
const obj = JSON.parse(dataTip)
Here I can access obj.name and obj.description

And when passing the values, Instead of
data-tip={${name}|${description}}
I did:
data-tip={JSON.stringify(the_object)}
Where 'the_object' is the element that contains a name and description attributes

[capstonednc]

@oladhari Where did you call the customized handleContent function to pass an object to dataTip?

[oladhari]

@capstonednc
in the react-tooltip getContent

            <ReactTooltip id="badge-tooltip" getContent={this.handleContent} />

[capstonednc]

@oladhari got it. I was still getting a [object Object] response, until I parsed the dataTip in the function and stringified it in the getContent prop. Thanks for the help!