Can't fire click event in tooltip

GoJS
1

Hi all,
I want to add click event inside tooltip, like this sample, I can click the tip panel to do something:

var myDiagram;
  function init() {
if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
var $ = go.GraphObject.make;  // for conciseness in defining templates
myDiagram =
  $(go.Diagram, "myDiagramDiv", // must be the ID or reference to div
    {
        initialContentAlignment: go.Spot.Center,
        "undoManager.isEnabled": true,      //can redo/undo
        "animationManager.isEnabled": false,//NOT ALLOW animation
        hasHorizontalScrollbar: false,      //cancel scrollbar
        hasVerticalScrollbar: false,        //cancel scrollbar
        allowCopy: false                    //NOT ALLOW COPY
    });

function clickOnToolTip() {
    window.alert("Click on the tip");
}

// define the Node template
myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    // define the node's outer shape
    $(go.Shape, "Rectangle",
      {
        name: "SHAPE", fill: "black", stroke: null
        }),
    {
        toolTip:  
        $(go.Adornment, "Auto",
            $(go.Shape, { fill: "#FFFFCC", width: 50, height: 50 },
                {
                    click: clickOnToolTip
                }
            ),
            $(go.TextBlock, { margin: 4 },
                new go.Binding("text", "key"))
        )
    }
    
    );  // end Node

// define the Link template
myDiagram.linkTemplate =
  $(go.Link, go.Link.Orthogonal,
    { corner: 5},
    $(go.Shape, { strokeWidth: 4, stroke: "#00a4a4" }));  // the link shape

myDiagram.model = $(go.GraphLinksModel);
myDiagram.model.nodeDataArray = [
    { key: 1, group: 66 }, { key: 2, group: 66 }, { key: 66, isGroup: true,group:88 }, {key:88,isGroup:true}];
myDiagram.model.linkDataArray = [{ from: 1, to: 2 }];

myDiagram.groupTemplate = $(go.Group, "Auto",
    { // define the group's internal layout
        layout: go.GraphObject.make(go.TreeLayout,
            { arrangement: go.TreeLayout.ArrangementVertical, isRealtime: false, layerSpacing: 100 },
        ),
        // the group begins unexpanded;
        // upon expansion, a Diagram Listener will generate contents for the group
        isSubGraphExpanded: true
    },
    go.GraphObject.make(go.Shape, "Rectangle",
        { fill: null, stroke: "gray", strokeWidth: 2 }),
    go.GraphObject.make(go.Panel, "Vertical",
        { defaultAlignment: go.Spot.Left, margin: 30 },
        go.GraphObject.make(go.Panel, "Horizontal",
            { defaultAlignment: go.Spot.Top },
            // the SubGraphExpanderButton is a panel that functions as a button to expand or collapse the subGraph
            go.GraphObject.make("SubGraphExpanderButton"),
            go.GraphObject.make(go.TextBlock,
                { font: "Bold 18px Sans-Serif", margin: 4 }
        ),
        // create a placeholder to represent the area where the contents of the group are
        go.GraphObject.make(go.Placeholder,
            { padding: new go.Margin(10, 30) })
    )
    )); 
  
  }

However, the click in the tooltip never fired, please give me some help to do that.
Thanks.

2

Adornments do not normally receive click events because that would be really annoying, for example on selection adornments.

However if you set GraphObject.isActionable to true on the object that has the click event handler, it should be called.

3

Hi Walter,
This really works for me, thanks a lot, but I have another problem: How can I not trigger the hideToolTip() method when my mouse move in the node that have different GraphicObject? Some thing like the sample below, now I have set thetoolTipDuration to 10s , however, when I mouse over the border of a different square (e.g. black -> red), the tool tip will hide. I don’t want it hide when move in this node, my tool tip is for all of the node, but not the part of it. Do you have any idea?

  function init() {
    var $ = go.GraphObject.make;  // for conciseness in defining templates
    var myDiagram =
      $(go.Diagram, "myDiagramDiv", // must be the ID or reference to div
        {
            "toolManager.hoverDelay": 1000,
            "toolManager.toolTipDuration": 10000,
            initialContentAlignment: go.Spot.Center,
            "undoManager.isEnabled": true,      //can redo/undo
            "animationManager.isEnabled": false,//NOT ALLOW animation
            hasHorizontalScrollbar: false,      //cancel scrollbar
            hasVerticalScrollbar: false,        //cancel scrollbar
            allowCopy: false                    //NOT ALLOW COPY
        });

    function clickOnToolTip() {
        window.alert("Click on the tip");
    }

    // define the Node template
    myDiagram.nodeTemplate =
        $(go.Node, "Vertical",
        // define the node's outer shape
        $(go.Shape, "Rectangle",
          {
            name: "SHAPE", fill: "black", stroke: null
            }),
        $(go.Shape, "Rectangle",
            {
                name: "SHAPE", fill: "red", stroke: null
            }),
        $(go.Shape, "Rectangle",
            {
                name: "SHAPE", fill: "gray", stroke: null
            }),
        $(go.Shape, "Rectangle",
            {
                name: "SHAPE", fill: "white", stroke: null
            }),
        {
            toolTip:  
            $(go.Adornment, "Auto",
                $(go.Shape, { fill: "#FFFFCC", width: 50, height: 50 },
                    { isActionable: true },
                    {
                        click: clickOnToolTip,
                        
                    }
                ),
                $(go.TextBlock, { margin: 4 },
                    new go.Binding("text", "key"))
            )
        }
        );  // end Node

    myDiagram.model = $(go.GraphLinksModel);
    myDiagram.model.nodeDataArray = [{ key: 1}];
    myDiagram.model.linkDataArray = [];
    
  }
4

Here is one solution, although it is overriding an undocumented method:

            "toolManager.doCurrentObjectChanged": function(prev, curr) {
              var tt = this.currentToolTip;
              if (tt === null) return;
              // this statement is new:
              if (curr !== null && curr.isContainedBy(tt.adornedObject)) return;
              // don't remove tooltip if we're now over any part of it
              if (curr !== null && tt instanceof Adornment && (curr === tt || curr.isContainedBy(tt))) return;
              this.hideToolTip();
            },

What you see there is the whole definition of ToolManager.doCurrentObjectChanged. But I have added a new if statement that sees if the new current object is still in the same Adornment.adornedObject – if so, it doesn’t call ToolManager.hideToolTip.

5

That’s great, thanks, walter!