react-tooltip
react-tooltip copied to clipboard
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 ?
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!
yes it is working ! thank you
@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.
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
If I'll pass an object, it's automatically converted to string "[object Object]"...
@ketysek I experience the same thing. Did you find a solution?
@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
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 Where did you call the customized handleContent function to pass an object to dataTip?
@capstonednc in the react-tooltip getContent
<ReactTooltip id="badge-tooltip" getContent={this.handleContent} />
@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!
I kept getting [object Object]
and then I removed html={true}
from my props and the problem went away.