How-To: Hover hyperlink node to display value of text as tooltip instead of link

GoJS
1

Hi all,

I am creating a node with hyperlink. Whenever I hover the text, the page link specified is displayed as a tooltip. Is it possible for the tooltip to display the text value instead of page link? If not possible, how about disable the hyperlink’s tooltip?

Here are my simplified codes:

var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        { initialContentAlignment: go.Spot.Center });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", { stroke: null }, new go.Binding("fill", "bgcolor")),
        $("HyperlinkText",
          function(node) { return "https://www.google.com"; },
          function(node) { return node.data.longtext; },
            { stroke: "white", font: "bold 30pt arial", maxSize: new go.Size(300, NaN), wrap: go.TextBlock.WrapFit }
        ), { toolTip:
          $(go.Adornment, "Auto",
            $(go.Shape, { fill: "#FFFFCC" }),
            $(go.TextBlock, { margin: 4 },
              new go.Binding("text", "tooltip"))
          ) }
      );

    myDiagram.model = new go.GraphLinksModel([
      { key: 1, bgcolor: "red", longtext: "Looooonnnngggg text here", tooltip: "<%=strName1%>" },
      { key: 2, bgcolor: "green", longtext: "Another looooooooooooooonnnnnnnggggg text here", tooltip: "<%=strName2%>" },
    ],[
      { from: 1, to: 2 }
    ]);

If you hover the text, “www.google.com” will be displayed as tooltip instead of the value of longtext. Need some help here.

Thank you.

Regards,
Brian

2

First, I hope it is clear that you can see the complete definition of the “HyperlinkText” panel at https://gojs.net/latest/extensions/HyperlinkText.js. There you will see how its GraphObject.toolTip is built and assigned to the Panel that is returned.

So if you want to use a different tooltip, just replace it. See how to define your own at GoJS Tooltips -- Northwoods Software.

It appears that you are doing the right thing, but you aren’t setting it on the “HyperlinkText” itself. Instead you are setting it on the Node, which means the user will only see that tooltip when they hover over the Node when not over the “HyperlinkText” panel.

$("HyperlinkText",
    function . . .,
    function . . .,
    {
      toolTip: . . .
    })