JSPlumb 在悬停时显示连接标签答案

【问题标题】：JSPlumb show connection label on hoverJSPlumb 在悬停时显示连接标签
【发布时间】：2014-07-06 17:39:59
【问题描述】：

我正在使用 JSPlumb 连接一堆块，我可以使用以下方法为连接设置标签：

JSPLUMB_INSTANCE.bind("connection", function (info) {
    info.connection.getOverlay("label").setLabel("w="+width+"<br>p="+pipelining);
});

这样标签在连接上总是可见的。有没有办法让标签只出现在鼠标悬停时？

【问题讨论】：

标签： javascript css hover jsplumb

【解决方案1】：

我遇到了与您描述的相同的挑战，我的解决方案如下所示：

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

所以在你的情况下，这应该可以解决问题：

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

让我知道它是否适合你，干杯！

更新：使用“mouseover”而不是“mouseenter”
New Documentation

【讨论】：

谢谢。在我看来是 mouseexit 而不是 mouseleave。
现在鼠标悬停了。
如果连接上有另一个标签但始终可见，并且如果您“鼠标悬停”该标签，而不是将连接传递给“鼠标悬停”回调，您最终会得到一个标签.如何从标签中获取父连接？
我通过在每个回调的开头添加： if (conn.hasOwnProperty('component')) { conn = conn.component } 解决了这个问题。