JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://jsplumb.org/js/1.3.3/jquery.jsPlumb-1.3.3-all-min.js"></script>
<div id="w1" class="w"></div>
<div id="w2" class="w"></div>

CSS

.w {
    width:3em;height:3em;border:1px solid blue;position:absolute;
}

.label {
padding:1em;
background-color:white;    
    border:1px solid #456;
}

#w1 {  left:5em; }
#w2 {  left:25em; }

JavaScript

jsPlumb.ready(function() {

   // jsPlumb.setRenderMode(jsPlumb.SVG);
    
    var connection = jsPlumb.connect({
        source:"w1",
        target:"w2",        
        overlays:[
          [ "Label", {
              id:"labelOverlay",
              cssClass:"label",  
              events:{
              "click":function() { alert("click", arguments); },
                  "mouseenter":function() { console.log("over", arguments); },
                  "mouseexit":function() { console.log("out", arguments); }              
              }
          }],
            [ "Diamond", {
                location:0.2,
              events:{
              "click":function() { alert("click", arguments); },
                  "mouseenter":function() { console.log("over", arguments); },
                  "mouseexit":function() { console.log("out", arguments); }              
              }                
            }]
        ]
    });
    
    // get the overlay: this should expose the underlying element, so you can
    // manipulate it.
    var overlay = connection.getOverlay("labelOverlay");    
    console.log("label overlay: ", overlay);
    
    connection.bind("mouseenter", function(c) {
       $("body").css("cursor", "pointer");
       console.log("connection enter");
    });
    connection.bind("mouseexit", function(c) {
        $("body").css("cursor", "default");        
       console.log("connection exit");
    });
});