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?

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?

• javascript
• css
• hover
• jsplumb

1 Answer 1

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