JSPlumb show connection label on hover

css, hover, javascript, jsplumb

Solution

I've had the same challenge as you are describing, my solution looks like this:

function setConnectionLabel(connection, label) {
    connection.bind("mouseenter", function(conn) {
        conn.addOverlay(["Label", { label: label, location:0.5, id: "connLabel"} ]);
    }); 

    connection.bind("mouseout", function(conn) {
        conn.removeOverlay("connLabel");
    });
}

So in your case this should do the trick:

JSPLUMB_INSTANCE.bind("connection", function (info) {
    setConnectionLabel(info.connection, "Labeltext");
});

let me know if it works out for you, cheers!

Update: Use "mouseover" instead of "mouseenter" New Documentation

Problem

I'm using JSPlumb to connect a bunch of blocks and I am able to set a label for a connection using: ``` JSPLUMB_INSTANCE.bind("connection", function (info) { info.connection.getOverlay("label").setLabel("w="+width+"<br>p="+pipelining); }); ``` This way the label is always visible on the connection. Is there a way to make the label only appear on mouse hover?

Original source