流程图控件GoJS教程：工具提示-控件新闻-慧都网

流程图控件GoJS教程：工具提示

翻译|使用教程|编辑：吴园园|2020-02-25 16:43:42.477|阅读 992 次

概述：GoJS提供了一种为任何对象或图表背景创建自定义工具提示的方法。工具提示是装饰物，当鼠标悬停在设置了GraphObject.toolTip的对象上时显示。工具提示零件与零件本身绑定到相同的数据。

相关链接：

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

通常，将工具提示实现为包含TextBlock的“ ToolTip”面板或TextBlocks面板和其他对象。每个“工具提示”仅仅是一个“自动”面板装饰品被遮蔽，并且其中所述边界是矩形形状具有浅灰色填充。但是，您可以将工具提示实现为任何任意复杂的装饰。

您可以在Buttons.js上看到“ ToolTip”构建器的定义方式。

在此示例中，每个节点都将其GraphObject.toolTip属性设置为Part，该部件通过常规数据绑定显示data.color属性。通过设置Diagram.toolTip，该图可获得其自己的工具提示。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: "white" },
        new go.Binding("fill", "color")),
      $(go.TextBlock, { margin: 5 },
        new go.Binding("text", "key")),
      {
        toolTip:  // define a tooltip for each node that displays the color as text
          $("ToolTip",
            $(go.TextBlock, { margin: 4 },
              new go.Binding("text", "color"))
          )  // end of Adornment
      }
    );

  // a function that produces the content of the diagram tooltip
  function diagramInfo(model) {
    return "Model:\n" + model.nodeDataArray.length + " nodes, " +
                        model.linkDataArray.length + " links";
  }

  // provide a tooltip for the background of the Diagram, when not over any Part
  diagram.toolTip =
    $("ToolTip",
      $(go.TextBlock, { margin: 4 },
        // use a converter to display information about the diagram model
        new go.Binding("text", "", diagramInfo))
    );

  var nodeDataArray = [
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", color: "pink" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

尝试将鼠标暂停在每个节点上或图的背景中。如果复制某些部分，您将看到该图的工具提示显示有关该图的较新信息。

您可以通过设置ToolManager.hoverDelay来更改鼠标在工具提示出现之前必须静止不动的时间。例如，初始化Diagram时，"toolManager.hoverDelay": 600将延迟更改为一秒的6/10。

您可以通过设置ToolManager.toolTipDuration来更改工具提示保持可见的时间。例如，"toolManager.toolTipDuration": 10000将可见时间更改为10秒。

定位

有两种方法可以自定义工具提示相对于装饰的GraphObject的位置。一种方法是重写ToolManager.positionToolTip。另一种方法是使工具提示装饰物包含占位符。占位符的位置和装饰对象的位置和位置相同。使用占位符创建工具提示时，请勿使用预定义的“工具提示”构建器，因为它会引入通常用作“自动”面板边框的额外形状。

  // this is a normal Node template that also has a toolTip defined for it
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: "white" },
        new go.Binding("fill", "color")),
      $(go.TextBlock, { margin: 5 },
        new go.Binding("text", "key")),
      {
        toolTip:                       // define a tooltip for each node
          $(go.Adornment, "Spot",      // that has several labels around it
            { background: "transparent" },  // avoid hiding tooltip when mouse moves
            $(go.Placeholder, { padding: 5 }),
            $(go.TextBlock,
              { alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom, stroke: "red" },
              new go.Binding("text", "key", function(s) { return "key: " + s; })),
            $(go.TextBlock, "Bottom",
              { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top, stroke: "red" },
              new go.Binding("text", "color", function(s) { return "color: " + s; }))
          )  // end Adornment
      }
    );

  var nodeDataArray = [
    { key: "Alpha", color: "lightyellow" },
    { key: "Beta", color: "orange" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

流程图控件GoJS教程：工具提示