Tooltips for individual nodes in HTML

[mshiraguppi]

How do I set tooltips for individual nodes in HTML without using ? Is there a way to modify "nodes" property? By the way, is "NodeLabelProps" property retired?

[Jake Zatecky]

You can set the title property for a node, which is close but not exactly like tooltips. Take a look at the Node Properties section of the documents.

Not sure what you mean on NodeLabelProps. The label value can be a JSX node if you want something custom and not just text. You can inject your own elements that have more exotic tooltips if you so choose.

[mshiraguppi]

Thanks Jake. With the title property, the tool tip is shown as string. So, if I include HTML tags for title they are shown as is. I got the following snippet.

data?.forEach((d) => {
const item = {
...d,
id: d[idKey] ?? d.id ?? null,
parent: d[parentKey] ?? d.parent ?? null,
label: d[labelKey] ?? d.label ?? null,
value: d[idKey] ?? d.id ?? null,
//title: d['Tooltip'] ?? null,
//title: <span dangerouslySetInnerHTML={{ __html: d['Tooltip'] }} />,
nodeLabelProps: {
title:

Tooltip for node 1

,
style: { display: 'inline-block' },
},
};

Here data array is being looped through and each item represents one node. I tried with title properties, which are commented out, one after another.
title: d['Tooltip'] ?? null ---- If this is used then the html tags are shown as strings.
title: <span dangerouslySetInnerHTML={{ __html: d['Tooltip'] }} />, ---- doesn't work
nodeLabelProps: {
title:

Tooltip for node 1

,
style: { display: 'inline-block' },
}, ----- doesn't work.

Could you please provide me a sample? I don't want to use as child element of . This was another sample example I got from google.
Thanks

[Jake Zatecky]

The title property just sets the HTML title property, which only renders text.

If you want JSX/HTML in your tooltip, you will have to use some tooltip library (such as react-tooltip) and supply the label property with the JSX necessary for both the label and the tooltip.