Best way to display multiple data in tooltip

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 ?

[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

[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