using HTML in labels

by sporritt

HTML

<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.9-all-min.js"></script>
<!-- this is an example of how to make labels appear on Endpoint when the mouse hovers over the Endpoint -->

<div class="d" id="d1">1</div>
<div class="d" id="d2">2</div>

CSS

.d { 
    position:absolute; 
    width:80px; 
    height:80px; 
    border:1px solid black; 
    z-index:1;
}

._jsPlumb_connector { z-index:0; }
._jsPlumb_endpoint { z-index:2; } /* endpoint sits above nodes and connectors */

#d1 { top:50px;left:50px; }
#d2 { top:50px;left:240px; }

JavaScript

jsPlumb.ready(function() {
    

    jsPlumb.draggable($(".d"));
    
    jsPlumb.connect({
        source:"d1",
        target:"d2",
        anchors:[
          [0,0,1,0,55,40],    
          [0,0,-1,0,10,60]            
        ]
    });                          
});