title/tootip text on endpoints or even an ID

[gg.ov...@gmail.com]

I have been trying to figure this out for a while and decided to finally ask to see if someone else has this figured out.  I would like to allow the user to hover over the endpoints and get hover text providing information about that point.  I frequently use the HTML title attribute or a jQuery tooltip plugin to show information on hover.

I am using jsPlumb 1.6.4 along with jQuery 2.0.0 and do not have flexibility to change versions at this time.  I am connecting two elements in what I think is a pretty normal way with jsPlumb:

                    myInstance.connect({
                        source: source,
                        target: target,
                        endpoint:['Dot', { radius:3, cssClass: "diagramDot"}],
                        anchor:[ "Perimeter", { shape:"Square", anchorCount:150 }],
                        connector: "Straight",
                        paintStyle:{"lineWidth":1, strokeStyle:"rgb(68,68,68)" },
                        detachable:false
                    });

I do notice that jsPlumb then provides a "div" as a result of setting up a connection between the two endpoints, but cannot for the life of me figure out how to force an attribute on the endpoint <div>s like "title" or even "id" so I can manage the DOM element later.

<div class="_jsPlumb_endpoint diagramDot ui-droppable _jsPlumb_endpoint_anchor_" style="position: absolute; height: 6px; width: 6px; left: 376.16px; top: 195px;">
    <svg style="position:absolute;left:0px;top:0px" width="6" height="6" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml">
        <circle cx="3" cy="3" r="3" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#456" stroke="none" style="">
    </svg>
</div>

I have many many endpoints in my final diagram and hope there is a simple solution to this that I am just missing in the API documentation.

Thank you for any experience you can share on this.

CeeCee

[Simon Porritt]

You can access that div through the canvas property of the Connection’s Endpoints:

var c = myInstance.connect({...});
c.endpoints[0].canvas.setAttribute("title", "whatever");

Do not override the ID attribute…that would confuse jsPlumb.

​

[gg.ov...@gmail.com]

Thank you! This worked perfect!

[gg.ov...@gmail.com]

Hi,

I have a follow up question.  I originally thought I could put a hover text via <title> over the connectors:

<svg class="_jsPlumb_connector" style="position:absolute;left:626.66px;top:196.5px" width="4.680000000000064" height="80" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml">
  <title>Hello, World!</title>
  <path stroke-width="1" style="" stroke="#444444" fill="none" xmlns="http://www.w3.org/1999/xhtml" version="1.1" pointer-events="visibleStroke" transform="translate(1.5,1.5)" d="M 0 0 L 1.6800000000000637 77 "></path>
</svg>

I am realizing now that if I do that, it messes up the connector (it is no longer rendered). I have a feeling the <title> may not be the recommended way to go. .

Is there a recommended way to place the equivalent of an HTML "title" attribute or svg <title> for a connector?  The effect I am going for is to have a few details related to the connector only show up when the user hovers over the connector.

Thanks

[Simon Porritt]

I didn’t know that the title attribute is not supported in SVG elements (or at least, it’s at the discretion of the browser vendor)…but it doesn’t surprise me I guess.

I typically use a hidden label with mouseover/mouseout events for this:

      jsPlumb.connect({
            source:"chartWindow1", 
            target:"chartWindow2",
            overlays:[
                [ "Label", {label:"FOO", id:"label", visible:false } ]
            ],
            events:{
                mouseover:function(c) { c.showOverlay("label"); },
                mouseout:function(c) { c.hideOverlay("label"); }
            }
        });

which you could of course generalise to a function:

        var _hoverConnect = function(source, target, label) {
            jsPlumb.connect({
                source:source,
                target:target,
                overlays:[
                    [ "Label", {label:label, id:"label", visible:false } ]
                ],
                events:{
                    mouseover:function(c) { c.showOverlay("label"); },
                    mouseout:function(c) { c.hideOverlay("label"); }
                }
            });
        };

I suppose, looking at this now, it wouldn’t be a big stretch to put a flag in an overlay spec like hover that basically said “show me only when the user is hovering on the connection”. Because the setup I have above works when you’re using connect, but if the user is establishing connections with the mouse you’d have to do a similar thing via event callbacks.

​

[gg.ov...@gmail.com]

Thank you very much! I am up and running successfully now with all of my hovers.

I wanted to share my final code here so that if someone else is looking for a similar thing, they can use my example. Before I posted my quesiotn I had tried "mouseover" and was not successful and had tried binding it, setting is as an "events" to no avail.  IN seeing that this is the same direction you took shed some light on the situation. I tried the code above with the same lack of effect so put a "click" in the "events" list to see what would happen.  "click" worked but "mouseover" and "mouseout" still failed to trigger.

I dug deeper on the mouseover which I still think should work, but did find that in the online documentation there were a list of bind events so I tried those. (https://jsplumbtoolkit.com/doc/events.html#connectionEvents)

These are the Connection events to which you can bind a listener:

• click(connection, originalEvent) - notification a Connection was clicked.

• dblclick(connection, originalEvent) - notification a Connection was double-clicked.

• contextmenu(connection, originalEvent) - a right-click on the Connection.

• mouseenter(connection, originalEvent) - notification the mouse entered the Connection's path.

• mouseleave(connection, originalEvent) - notification the mouse exited the Connection's path.

• mousedown(connection, originalEvent) - notification the mouse button was pressed on the Connection's path.

• mouseup(connection, originalEvent) - notification the mouse button was released on the Connection's path.

I tried the mouseenter and mouseleave and those DID work.  The Overlay Events section of the documentation still leads me to believe I can put the "mouseover" there but I can certainly use the "mouseenter" to get it to do what I want.

Thank you for the solution. I very much appreciate your help!  I have the final version here:


                    var myInstance= myInstance.connect({
                        source: source,
                        target: target,
                        endpoint:['Dot', { radius:3}],

                        anchor:[ "Perimeter", { shape:"Square", anchorCount:150 }],
                        connector: "Straight",
                        paintStyle:{"lineWidth":1, strokeStyle:"rgb(68,68,68)" },

                        detachable:false,
                       
                        overlays:[
                                  ["Label", {label:interconnectHvr, visible:false } ]
                              ],
                              events:{
                                  click: function(c) {
                                      alert ("clicked");
                                  },
                                  mouseenter:function(c) {
                                      c.showOverlay();
                                  },
                                  mouseleave:function(c) {
                                      c.hideOverlay();
                                  }
                              }
                    });


I am not using the id here since there will always only be one overlay, but if someone has multiple connectors between two elements I think the id would be important.

Thanks!

Cee Cee