ToolTips on items on row of table that has handing for mouse hovers on its rows

GoJS
1

Prerequisite:

  • I have a dynamically showable objects in a row on hover of mouse on row

Need:- I need a tooltip on a specific object inside a row
of a table.

In below codeToolTip comes for a fraction of a second
then goes away

toolTip:

      // this.goMake(go.Adornment, "Spot", 

        this.goMake(go.Adornment, "Auto", 

       //{ background: "transparent" },

this.goMake(go.Shape, { fill: “black” }),

       // this.goMake(go.Placeholder, { padding: 5 }),

        this.goMake(go.TextBlock, { margin:59,stroke:"white",font: "14px Arial, Helvetica,sans-serif" },

          new go.Binding("text", "path"))

      )   

  })

Tried below also, tool tip stays, and then the dynamically
showable objects in a row on hover of mouse on row does not shows, up on the
same row, also while the tooltip is there I cant hover on another row. another
row seems to have no response on hover

toolTip: // define a tooltip for each node that displays the color as text

        this.goMake(go.Adornment, "Spot", 

       // this.goMake(go.Adornment, "Auto", 

       { background: "transparent" },

   //this.goMake(go.Shape, { fill: "black" }),

       this.goMake(go.Placeholder, { padding: 5 }),

        this.goMake(go.TextBlock, { margin:59,stroke:"white",font: "14px Arial, Helvetica,sans-serif" },

          new go.Binding("text", "path", function(s) { return "Path: " + s; }))

      )
2

It sounds as if the GraphObject for which you want to show a tooltip is a Shape or a Panel that is not a solid area, so that minor movements of the mouse do not accidentally go outside of the shape and therefore need to remove the tooltip.

Perhaps you just need to set background: "transparent" on your tooltipped Shape or Panel, so that all mouse events are caught in those bounds are caught by that Shape or Panel.

3

I already have this.goMake(go.Panel, “TableRow”, , this.goMake(go.Shape,(visible on row hover) and shape’s toolTip has
background: “transparent”,

I still see the same behaviour as mentioned in above 2 cases, any help please?

4

It’s hard for me to understand what your situation is and what you have tried.

Basically, GraphObject.toolTip will show, after a delay and until it times out, for a particular GraphObject as long as the mouse is “within” that object or within the tooltip Adornment itself.

Are you trying to keep the tooltip visible even when the mouse moves outside of that object? That’s not what tooltips are normally supposed to do. But you can get that effect when the mouse stays within the Adornment, so one possibility is to make sure the Adornment has a “transparent” background and that the Adornment covers the whole area of the GraphObject that has the toolTip.

5

I have a dynamically showable objects in a row…on hover of mouse on row,(i have multiple rows) the dynamically shapes objects becomes visible.I need a tooltip on these specific shapes objects which are inside a rows of a table.
I have { background: “transparent” }, on shape as well as on tooltip, In this scenario when tooltip becomes visible on hovering on shape obj ,the shape obj becomes invisible and in this point in time when i try to hover on another row while tool tip is being displayed from prev row the shapes obj does nt becomes visible on current row as tool tip is being displayed from previous obj hover from previous row.

6

Oh, so is the problem that the Shape becomes invisible because you have a GraphObject.mouseLeave event handler that makes it invisible? Perhaps you need to handle there being a visible tooltip Adornment in your mouseEnter and mouseLeave event handlers.

7

Yes.
MoreOver you cannot make other rows obj as visible since tooltip is still up for prev row.
Question 2:- A workaround can I make a row specific tool tip that on mouseLeave/enter controls it along with shape visibility?

8

I do not understand what you are suggesting. I recommend that you try implementing everything that you need in your event handlers.

9

Do you want me to control the tootip visibility where i have obj visibility controlled inside rows?

I am also saying that i haven’t done modification on default tooltips behavior. When i go inside different row of table… tooltip does not go away which camein from prev row hover. Is this a bug?

10

I just tried adding a tooltip to the methodToolTip of the UML Class sample, UML Class Nodes.

    var methodToolTip =
      $(go.Adornment, "Spot",
        $(go.Placeholder),
        $(go.Panel, "Vertical",
          {
            alignment: new go.Spot(1, 0, -10, 0), alignmentFocus: go.Spot.Left,
            defaultStretch: go.GraphObject.Horizontal
          },
          $("Button",
            {
              click: function(e, obj) { alert("Hi, " + obj.part.data.name); }
            },
            $(go.TextBlock, "Hi")
          ),
          $("Button",
            {
              click: function(e, obj) { alert("Bye, " + obj.part.data.name); }
            },
            $(go.TextBlock, "Bye")
          )
        )
      );

and

    var methodTemplate =
      $(go.Panel, "Horizontal",
        { toolTip: methodToolTip },
      . . .

I didn’t have any problem with tooltips not switching when the mouse hovered over a different item.

In fact, what I found annoying is that the tooltip would go away as the mouse passed over different objects (TextBlocks) within the item Panel and then come right back after waiting. That’s because when the current object at the mouse changes, the tooltip is removed, and maybe a different tooltip might appear. But because the tooltip is defined on the Panel, the same tooltip would be used for each element. Maybe we should special-case that, so that a tooltip is not removed unless the effective tooltip changes. But that requires additional thought.

You can avoid those issues by implementing your own mouseHover event to show the tooltip (or whatever) and your own mouseLeave event to hide it when leaving the Node.