4

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?

mohsaied
  • 2,066
  • 1
  • 14
  • 25

1 Answers1

8

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

Community
  • 1
  • 1
Remco
  • 172
  • 9
  • 1
    Thanks for this. It seems to me to be mouseexit instead of mouseleave. – Yster Sep 03 '15 at 17:13
  • It's now mouseout. – Steel Nation May 03 '16 at 21:26
  • If there is another label on the connection but visible all the time and if you 'mouseover' that label, instead of having a connection been passed to the 'mouseover' callback, you end up with a label. How to get the parent connection from the label? – Florian G Jun 03 '16 at 20:10
  • I fixed the problem by adding: if (conn.hasOwnProperty('component')) { conn = conn.component } at the beginning of each callback. – Florian G Jun 03 '16 at 20:21