Show information of a link when passing over the

GoJS
1

I need that when I hover over a link, show information.

example:
modelo
ejemplo
I try:

image
image.png922×163 6.61 KB

but I don’t bet anything.

2

You probably want to implement that info as link labels with opacity of 0 until the mouse enters the link. Your link template could be something like this:

myDiagram.linkTemplate = 
    $(go.Link,
      { ... },
      $(go.Shape,  // the main shape, this is where we'll add mouseEnter/Leave
        {
          mouseEnter: function(e, obj) {
            obj.part.findObject("LABEL1").opacity = 1;
            obj.part.findObject("LABEL2").opacity = 1;
          },
          mouseLeave: function(e, obj) {
            obj.part.findObject("LABEL1").opacity = 0;
            obj.part.findObject("LABEL2").opacity = 0;
          }
        }
      ),
      $(go.Shape, { toArrow: "Standard" }),
      $(go.TextBlock,
        {
          name: "LABEL1",
          opacity: 0,  // default opacity is transparent
          segmentIndex: 0, segmentOffset: new go.Point(NaN, NaN)
        },
        new go.Binding("text", "entrada", function(txt) { return "entrada: " + txt; })
      ),
      $(go.TextBlock,
        {
          name: "LABEL2",
          opacity: 0,  // default opacity is transparent
          segmentIndex: -1, segmentOffset: new go.Point(NaN, NaN)
        },
        new go.Binding("text", "salida", function(txt) { return "salida: " + txt; })
      )
    );

So all this does is find the link label objects by name and sets their opacity upon mouse enter and leave of the main link shape. You may also want to add a transparent main shape with a larger strokeWidth that can make it so there is more space to trigger the labels. We do this on the links in the Flowchart sample with a “highlight” for instance.

1 Like