Adding hoverDelay doesnot make a node to display

GoJS
1

for example in Record Mapper
I hover on first row and I want a button to be specifically showed for row1, i added hoverDelay: 200 in
goMake(go.Node,{hoverDelay: 200},“Auto”, new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify), // this rectangular shape surrounds the content of the node this.goMake(go.Shape,

I also implemented below ad per docs
mouseHover:(e, obj) =>{ var node = obj.part; this.nodeHoverAdornment.adornedObject = node; node.addAdornment(“mouseHover”, this.nodeHoverAdornment); },

Question1:-Please help where to put hoverDelay: 200, in my diagrom i have multiple nodes.
2:- when i remove hoverDelay things work fine and delay is large in showing buttons, but the Hi!/Bye BUTTON always apprear in centre of node which has table I need this near/next to selected row, I have alignment: go.Spot.Left,alignmentFocus: go.Spot.Right… played around with this could not place it near to selected row. Any clue?

2

You should have seen the error in the console window that “hoverDelay” is not a property of the Node class.

If you search for “hoverDelay”, you will find links to:
http://gojs.net/latest/intro/toolTips.html

If you are going to adorn the whole Node, the Adornment will apply to the whole Node. You want to set the adornedObject to be your row.

3

well!below code and still comes as center, not according to selected row
(go.Panel, “TableRow”, // this Panel is a row in the containing Table { mouseHover:(e, obj) =>{ var node = obj.part; this.nodeHoverAdornment.adornedObject = node; node.addAdornment(“mouseHover”, this.nodeHoverAdornment); },},

4

Also when adornment is applied to a node and if node has click events inside it on the objects, then the objects with click events code is not hit.

5

You keep setting Adornment.adornedObject to the whole Node.

But wouldn’t it be easier to use a tooltip?

  {
    itemTemplate:
      $(go.Panel,
        {
          toolTip:
            $(go.Adornment, "Spot",
              { background: "transparent" },
              $(go.Placeholder),
              $(go.Panel, "Vertical",
                { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left },
                $("Button",
                  $(go.TextBlock, "Hi"),
                  { click: function(e, but) { alert("Hi, " + but.part.adornedObject.data.t); } }
                ),
                $("Button",
                  $(go.TextBlock, "Bye"),
                  { click: function(e, but) { alert("Bye, " + but.part.adornedObject.data.t); } }
                ),
              )
            )
        },
        . . .
6

To answer your other question – that’s because the Adornment is in front of the Node. Maybe you don’t want to use a tooltip, because of its tendency to disappear when the mouse leaves the item panel or node. Note that I set Adornment.background to “transparent” so that mouse event do not go to the adorned Node, but only go to the Adornment as long as the mouse is inside the Adornment’s bounds.

So maybe you do want to explicitly manage the showing and hiding of an Adornment for your items. That way you can allow mouse events to go to the Node.

7

How about I add a button in table row in a column and control its visibility on selection and hover of a row, when row is selected/hover this button is visible is that a possibility?

8

Sure, that should be just as simple to implement. The disadvantage is that you’d have the overhead of having all those buttons (one per row?) in each node.

You also have the flexibility of either setting GraphObject.visible to true or false, or setting GraphObject.opacity to 1.0 or 0.0. The difference controls whether the button(s) take up space when they are not seen by the user.

9

any example stating GraphObject.visible to true or false, makes a button visible/invisible in a row?,
how to expose the button visibility in a row from mouse hover event in a row?
Thanks!

10

Yes, there are a lot of examples. Search the samples for setting .visible = or for binding go.Binding("visible". Or the same setting or binding of the opacity property.

Also search for mouseEnter and mouseLeave event handler samples, such as Flowchart.

There is also: Buttons that show on Hover, although that uses Adornments.