display endpoint labels on hover

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css">
<script src="https://support.loginet.ee/otrs-web/js/thirdparty/jsplumb-1.6.4/jsplumb.js"></script>
<!-- this is an example of how to make labels appear on Endpoint when the mouse hovers over the Endpoint -->
<!-- its also an example of how to integrate with the 'resizable' function in jQuery UI -->

<div class="d" id="d1">resize me</div>
<div class="d" id="d2">me too</div>

CSS

.d { 
    position:absolute; 
    width:4em; 
    height:2em; 
    border:1px solid black; 
    z-index:1;
    background-color:white;
    text-align:center;
    padding-top:1em;
}

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

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

.foo {
    display:none;         /* foo is display:none to begin */
    background-color:white; 
    z-index:10;
    border:1px solid red;
    font-size:10px;
    padding:0.2em;
    cursor:pointer;
}

JavaScript

jsPlumb.ready(function() {
   var lbls = [
       // note the cssClass and id parameters here
       [ "Label", { cssClass:"foo", label:"FOO", id:"lbl" } ]
   ];
    
    var e1 = jsPlumb.addEndpoint("d1", { overlays:lbls }),
        e2 = jsPlumb.addEndpoint("d2", { overlays:lbls });
    
    jsPlumb.connect({source:e1,target:e2});
    
    // bind mouse enter and exit events to an endpoint
    var _listeners = function(e) {
        e.bind("mouseenter", function(ep) { 
            ep.showOverlay("lbl");
        });
        e.bind("mouseexit", function(ep) { 
            ep.hideOverlay("lbl");
        });        
    };
      
    _listeners(e1);
    _listeners(e2);            
                  
    jsPlumb.draggable($(".d"));
    
    $(".d").resizable({
        resize:function(e, ui) {
            jsPlumb.repaint(ui.helper);
        }
    });
});