Tip Handler

This optional callback can be implemented to override the tooltip content that is displayed by default for each canvas object. It is called before tips are shown for: palette categories, palette node templates, nodes, ports, links, decorations and the state tag.

tipHandler

    tipHandler(tipType, data)

Note: The display of tooltips (or not) can be controlled using the tipConfig field of the canvas config object.

Common Canvas provides default implementations for all of the tips except for links and decorations, as follows:

Object	Default tip behavior
Palette category	Contains the category name and the category description.
Palette node template	Contains the category name, the node type and node description.
Node	Contains the name, description and status icon and optionally, if the name was modified from the original name, the original node type.
Port	The port label is shown
Link	No tip is shown by default
Decoration	No tip is shown by default
State tag	An appropriate explanation for the state displayed by the tag

To override the content, you can return either a string or JSX object. If your code returns null for a particular type of tip, Common Canvas will display the default tip for that object. See App.js in the test harness code for an example tipHandler.

Common Canvas calls the tipHandler callback with two parameters:

• tipType - the type of the tip
• data - an object that describes the canvas element for which the tip was requested

Here are some specific examples:

Palette categories:

• tipType: “tipTypePaletteCategory”
• data: An object with category information, like this:

{
    category: {
        id: "1234",
        label: "Import",
        description: "Category for import nodes",
        image: "/images/import.svg"
    }
}

Palette nodes templates:

• tipType: “tipTypePaletteItem”
• data: An object with node template information:

  {
      nodeTemplate: {
          label: "C50",
          description: "C50 Model",
          operator_id_ref: "com.ibm.commonicons.models.c50",
          type: "model_node",
          image: "/images/common_node_icons/models/model_c50.svg",
          input_ports: [{...}],
          output_ports: []
      }
  }
  

Nodes:

• tipType: “tipTypeNode”
• data: An object with pipelineId and node information:

  {
      pipelineId: "153651d6-9b88-423c-b01b-861f12d01489",
      node: {
          id: "idGWRVT47XDV",
          type: "execution_node",
          operator_id_ref: "type",
          output_ports: [...],
          input_ports: [...],
          label: "Define Types",
          description: "",
          image: "",
          x_pos: 445,
          y_pos: 219
      }
  }
  

Ports:

• tipType: “tipTypePort”
• data: An object with pipelineId, node and port information:

  {
      pipelineId: "153651d6-9b88-423c-b01b-861f12d01489",
      node: {
          id: "idGWRVT47XDV",
          type: "execution_node",
          operator_id_ref: "type",
          output_ports: [{...}],
          input_ports: [{...}],
          label: "Define Types",
          description: "",
          image: "",
          x_pos: 445,
          y_pos: 219
      },
      port: {
          id: "outPort",
          label: "Output Port"
      }
  }
  

Links

• tipType: “tipTypeLink”
• data: An object with pipelineId and link information.

  {
      pipelineId: "153651d6-9b88-423c-b01b-861f12d01489",
      link: {
          id: "canvas_link_3",
          x1: 515,
          y1: 248,
          x2: 611,
          y2: 180,
          class_name: "canvas-data-link",
          type: "nodeLink",
          src: {
              id: "idGWRVT47XDV",
              type: "execution_node",
              operator_id_ref: "type",
              output_ports: [{...}],
              input_ports: [{...}],
              label: "Define Types",
              description: "",
              image: "",
              x_pos: 445,
              y_pos: 219
          },
          srcPortId: "outPort",
          trg: {
              id: "id8I6RH2V91XW",
              type: "binding",
              operator_id_ref: "c50",
              output_ports: [],
              input_ports: [{...}],
              label: "C5.0",
              description: "",
              image: "",
              x_pos: 611,
              y_pos: 151
          },
          trgPortId: "inPort"
      }
  }
  

Decorations

• tipType: “tipTypeDec”
• data: An object with pipelineId and decoration information.

  {
      pipelineId: "153651d6-9b88-423c-b01b-861f12d01489",
      decoration: {
          "id": "2016",
          "position": "topRight",
          "label": "LCFC",
          "tooltip": "Foxes never quit"
      }
  }
  

State tag

• tipType: “tipTypeStateTag”
• data: An object with pipelineId and decoration information.

  {
      stateTagText: "This flow is locked and cannot be edited.",
      stateTagType: "Locked"
  }