Use of ToolTip during Link Validation

GoJS
1

During Link Creation, I have a method checkLink, which validates formation of a link between any two nodes.
My requirement is, I want to show a text (error Message/Explanation) to hover on top of a node explaining why a link formation isn’t allowed for that node.
How can I achieve it? Will ToolTip suffice my needs or is there any better tool available for this functionality?

2

Here’s a simple example of a custom linkValidation predicate and overriding two methods on LinkingTool to show and hide a tooltip for a node, all in the initialization of a Diagram:

    "linkingTool.linkValidation": function(fromnode, fromport, tonode, toport, link) {
      // a silly link validation predicate -- whether or not the node's data.text includes "e"
      return tonode.data.text.indexOf("e") >= 0;
    },
    "linkingTool.setNoTargetPortProperties": function(tempnode, tempport, toend) {
      go.LinkingTool.prototype.setNoTargetPortProperties.call(this, tempnode, tempport, toend);
      if (!toend) return;  // only bother to show message when linking to a new node
      var node = this.diagram.findPartAt(this.diagram.lastInput.documentPoint);
      if (node instanceof go.Node) {
        // create and show tooltip about why linking fails for this node,
        // but don't re-create the same tooltip Adornment all the time
        if (this.diagram.toolManager.currentToolTip === null ||
            this.diagram.toolManager.currentToolTip.adornedPart !== node) {
          // create a GoJS tooltip, an Adornment
          var tt = $(go.Adornment, "Auto",
                      $(go.Shape, { fill: "#FFFFCC" }),
                      $(go.TextBlock, { margin: 4 },
                        "Unable to connect to node '" + node.data.text +
                        "'\nbecause the text does not contain the letter 'e'."));
          this.diagram.toolManager.showToolTip(tt, node);
        }
      } else {
        // assume don't want to show tooltip when mouse is not over a node
        this.diagram.toolManager.hideToolTip();
      }
    },
    "linkingTool.copyPortProperties": function(realnode, realport, tempnode, tempport, toend) {
      go.LinkingTool.prototype.copyPortProperties.call(this, realnode, realport, tempnode, tempport, toend);
      this.diagram.toolManager.hideToolTip();
    },

Note that if your app allows the user to reconnect existing links (Link.relinkableFrom or Link.relinkableTo are true), then you’ll want to override the methods on the RelinkingTool as well.

3

Thank You Walter For your constant support. Your solution works for me.
I have one issue, the hover delay time doesn’t seem to work.

Inside My diagram object I have set:

“toolManager.hoverDelay” : 2000,
“linkingTool.linkValidation”: checkLink,
“relinkingTool.linkValidation”: checkLink,
“linkingTool.setNoTargetPortProperties”: function(tempnode, tempport, toend) { …

So Ideally, it should wait for 2 seconds before showing the toolTip text box. Currently as soon as the link points the wrong node, it throws up that tooltip text.

4

Yes, the tooltip is shown immediately due to the call to ToolManager.showToolTip.

I think you could implement a delay by overriding several methods on LinkingTool (and RelinkingTool, if applicable to your app). Override LinkingTool.DoMouseMove to call the base method and then also call:

    if (this.isActive) {
        this.standardWaitAfter(this.diagram.toolManager.hoverDelay, this.diagram.lastInput);
    }

Also override LinkingTool.doWaitAfter to actually call ToolManager.showToolTip if appropriate and otherwise to call ToolManager.hideToolTip.

I believe this is the right strategy, but I haven’t tried this to make sure it works.