Network Graph: tooltips for edges (links)

[Cortez]

Hi there guys!
Is there a way to show tooltips when hovering over lines connecting vertices?

[Cortez]

A small clarification: I need to show some additional information related to edges (lines) when hovering over them.

[dawid.d]

Hi,

Thanks for contacting us!

It seems like there's already a thread about the same thing in the forum. I think it can be helpful for you.
See: viewtopic.php?t=44844

​If you have further inquiries, you may reach out to me at any time.
Best regards!

[Cortez]

Hi dawid
Thanks for your reply. That demo seems to suit my purposes except for one important detail: it is based on label renderer rather than a tooltip, so it can not utilize the advantages of "tooltip.outside" option. Because of that some of these label-based custom tooltips are cut off when close to plot area edges:
https://jsfiddle.net/Cortez/n45bxvfe/1/

Is there a way to use native tooltip renderer instead? Or do you know a way how to make this label-based custom tooltips to be not cut off?

Thanks!

[Cortez]

Also want to add that another negative side of proposed approach is that custom tooltip does not appear when hovering over line's data label (unlike when hovering on marker's data label). But that is not as important as the previous issue.

[Cortez]

And one more: the custom tooltip doesn't stick very well on drag, so it is better to hide it while dragging. But for some reason I wasn't able to hook up to darg events successfully.

[dawid.d]

Hi,

Unfortunately, the method refresh (see: https://api.highcharts.com/class-refere ... ip#refresh) that allows custom display of the tooltip takes only a point as an argument. So to meet your expectations, I think the most reasonable is to write your own tooltip as an additional html element and handle it with the proper Highcharts events.

Demo: https://jsfiddle.net/BlackLabel/89hndqo3/

I hope you will find it useful
Best regards!

[Cortez]

thanks dawid
that looks very close to what I need. The only issue now is that it is quite hard to catch edges tooltips, since lines are very thin and it is hard to point your cursor on that thin line. Of corse I understand it is possible to make lines thicker, but I need them thin. Any ideas?

[dawid.d]

Hi,

This required more interference in the native Highcharts methods, but it can be done by adding a transparent path above the link, with a larger stroke-width value.

Demo: https://jsfiddle.net/BlackLabel/jym5a8n9/

Let me know if that was what you were looking for!
Kind regards