Using custom divs for mouse over tool tips

GoJS
1

How can I set my own div/css as tooltips? I’m looking for an example similar to this Data Visualization GoJS Sample

What I have currently is this: (mostly copied from the floorplan example)

$$(go.Shape,
              {
                  name: "SHAPE",
                  // the following are default values;
                  // actual values may come from the node data object via data-binding
                  geometryString: "F1 M0 0 L20 0 20 20 0 20 z",
                  fill: "rgb(130, 130, 256)",
                  mouseOver: function (e, obj) { displayAlertInfo(e, "ALERT!!"); },
                  mouseLeave: function (e, obj1, obj2) { hideAlertInfo(); }
              }

        var displayBox =
          $$(go.Part, go.Panel.Auto, { layerName: "Tool" },
              $$(go.Shape, "RoundedRectangle",
                  { fill: "whitesmoke", stroke: "red", strokeWidth: 1 }),
              $$(go.TextBlock,
                  { margin: 3, text: " " }
          ));

        function displayAlertInfo(e, myText) {
            displayBox.elt(1).text = myText;
            displayBox.move(new go.Point(e.documentPoint.x, e.documentPoint.y));
            myDiagram.add(displayBox);
        }
        function hideAlertInfo() {
            myDiagram.remove(displayBox);
        }

I tried changing it to

        function displayAlertInfo(e, myText) {
            //displayBox.elt(1).text = myText;
            //displayBox.move(new go.Point(e.documentPoint.x, e.documentPoint.y));
            //myDiagram.add(displayBox);
            updateInfoBox(e);
        }


        function updateInfoBox(e) {
          
            var x =
                "<div class='top-news'>" +
                    "<a href='#' class='btn green'>" +
                    "<span>TEST</span>" +                   
                    "<i class='fa fa-cogs top-news-icon'></i></a>";

            var box = document.getElementById("infoBoxHolder");
            box.innerHTML = x;
            box.style.left = e.documentPoint.x + 200 + "px";
            box.style.top = e.documentPoint.y + 230 + "px";
        }

But nothing shows up when I mouse over

2

You should at least be using the e.viewPoint, as the Data Visualization sample does, not the e.documentPoint.

I can’t tell if there are any other problems with your code and HTML.