Can we have separate delays for tooltip and mouseHover event handler on a node?

GoJS
1

Hi,

I have a node and on hover on the node, it either shows an adornment or a tooltip based on some condition.

$(
    go.Node,
    'Spot',
    {
        locationObjectName: 'SHAPE',
        locationSpot: go.Spot.Center,
        toolTip: tooltipTemplate,
        contextMenu,
        itemTemplate: boundaryEventItemTemplate(),
        resizable: true,
        resizeObjectName: 'PANEL',
        resizeAdornmentTemplate: nodeResizeAdornmentTemplate,
        selectionAdorned: true,
        selectionAdornmentTemplate: resizableSelectionAdornmentTemplate(),
        selectionChanged: onSelectionChanged,
        mouseHover: (e, obj) => {
            if (obj.part.findLinksOutOf().count === 1) {
                return;
            }
            const node = obj.part;
            const hoverAdornment = getHoverAdornment(node.data);
            hoverAdornment.adornedObject = node;
            node.addAdornment('mouseHover', hoverAdornment);
        },
    },

Showing the adornment is handled in a mouseHover handler. Currently, we’re setting the delay using following rule:
diagramInstance.toolManager.hoverDelay = 500;
But we’d like to have separate delays for showing the tooltip and adornment. Is it possible to achieve this ?

2

Did you want to show a tooltip a while after showing your hover adornment?

3

Not exactly.
There are two cases and in each case either the adornment or tooltip is shown.
First case: Node doesn’t have any outgoing links
On mouseHover for 200ms, adornment is shown and it covers the node completely so that mouse is no longer hovered on the node. This prevents the tooltip from getting triggered.

Second case: Node has an outgoing link
mouseHover handler returns after 200ms and hovering for 500ms should trigger the tooltip

This is the intended implementation and for this to work we need separate delays for mouseHover and tooltip

4

Try this, or something like it:

<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          // ToolManager.prototype.doWaitAfter does:
          //     this.doMouseHover();
          //     if (!this.isActive) {  // not when mouse down
          //       this.doToolTip();
          //     }

          "toolManager.doMouseHover": function() {
            if (!this._afterHover) {
              go.ToolManager.prototype.doMouseHover.call(this);
              this.standardWaitAfter(600);  // try for a second hover event
            }
          },

          "toolManager.doToolTip": function() {
            if (this._afterHover) {
              go.ToolManager.prototype.doToolTip.call(this);
              this._afterHover = false;
            } else {
              this._afterHover = true;
            }
          }
        });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        {
          toolTip: $("ToolTip", $(go.TextBlock, "a tooltip")),
          mouseHover: function(e, node) {
            if (node.findLinksOutOf().count === 1) return;
            var hoverAdornment =
              $(go.Adornment, "Spot",
                {
                  background: "rgba(0,0,0,0.2)",
                  mouseLeave: function(e) {
                    node.removeAdornment("mouseHover");
                  }
                },
                $(go.Placeholder, { margin: 10 }),
                $(go.TextBlock, "Hover Adornment",
                  { alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.TopLeft })
              );
            hoverAdornment.adornedObject = node;
            node.addAdornment('mouseHover', hoverAdornment);
          }
        },
        $(go.Shape,
          { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8, editable: true },
          new go.Binding("text").makeTwoWay())
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 3, text: "Gamma", color: "lightgreen", group: 5 },
      { key: 4, text: "Delta", color: "pink", group: 5 }
    ],
    [
      { from: 3, to: 4 }
    ]);
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>