Lines drawn using linear gradient and jquery connections are overlapping on each other

[SreedeviM61116]

I am trying to draw bent line between 2 svg elements while drawing a network diagram. I am able to draw the line using linear gradient and calc function but the links are overlapping on each other. I am displaying a popup when clicked on each and every link. Appropriate popup is showing as the links are overlapping. For reference please see the picture below:

[SreedeviM61116]

If the line is vertical then it is properly working but if the links are bent then I am not able to get appropriate popup

[diamond-msc]

This is one of the shortcomings of the div-border technique we use. The individual divs have a lot of overlap.

I checked the labels demo because it had the same issue.
I updated the CSS z-indexes in order to allow hovering over the individual labels.

Maybe you could add helper elements like the labels in the demo, in order to provide click-here indicators?

[SreedeviM61116]

Thank you for the reply. Its not necessarily jquery connections, even just jquery is fine.