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:2em; 
    height:2em; 
    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; }

.aLabel {
    background-color:white; 
    z-index:10;
    border:1px solid red;
    font-size:20px;
    padding:1em;
    cursor:pointer;
    text-align:center;
    box-shadow:0px 0px 3px 3px #567;
    border-radius:3px;
    -moz-border-radius:3px;
}

.strong {
    font-weight:bold;
}
.red {
    color:red;
}

JavaScript

jsPlumb.ready(function() {
    
    var animStyle = { fillStyle:"red" },
        mainStyle = { fillStyle:"grey" },
        paint = function(conn, style) {
          conn.endpoints[0].setPaintStyle(style);
         // conn.endpoints[1].setPaintStyle(style);        
        },
           anim = function(conn) {
             paint(conn, animStyle);
    window.setTimeout(function() { paint(conn, mainStyle); }, 250);
           };
    
    jsPlumb.draggable($(".d"));
    jsPlumb.addEndpoint("d1", {isSource:true,isTarget:true, anchor:"BottomCenter", paintStyle:mainStyle});
    
    jsPlumb.addEndpoint("d2", {isSource:true,isTarget:true,anchor:"BottomCenter", paintStyle:mainStyle});
    
    jsPlumb.bind("jsPlumbConnection", function(info) {
        anim(info.connection);
    });
    
});