Tooltip Customization

[elliott-with-the-longest-name-on-github]

First off, thanks for the great library!

What's the intended way to customize the hover tooltips? I've toyed around with several of the mouse-related callback props and I'm not sure exactly what the best approach is.

[vasturiano]

@elliott-with-the-longest-name-on-github thanks for reaching out.

What part of the tooltips would you like customize, the content, the styling, or the position?

Depending on what you're after there might be different ways to go about it.

[elliott-with-the-longest-name-on-github]

Mainly the content and styling -- I'd like to display more about the node than just a single property, and potentially add a button or two.

[vasturiano]

The tooltips are floating below the mouse pointer so you won't be able to interact with them, so buttons won't really be applicable.

But as for styling the content, as mentioned in the the docs you can pass an HTML string that will let you format the content in any way you want. For example:

nodeLabel={node => `<div>${node.id}: <span style="color: orange">${node.value}</span></div>`}

[elliott-with-the-longest-name-on-github]

Ah shoot, thank you, I had used the nodeLabel prop but didn't realize it could be arbitrary HTML!