display endpoint labels on hover

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: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);            
                  
});