Custom info popup

<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="demo"></div>

//No CSS for this example 

    var chartContainer = document.getElementById("demo");

    // dynamically create the element that will be used for the context menu.
    // an existing element can be used as well.
    var infoElement = document.createElement("div");
    infoElement.style.zIndex = 9999;
    infoElement.style.display = "none";
    infoElement.style.position = "absolute";
    infoElement.style.background = "#eee";
    infoElement.style.border = "1px solid #09c";
    infoElement.style.padding = "10px";
    infoElement.style.pointerEvents = "none";

    var infoElementVisible = false;

    // the context menu element has to be the direct descendant of the document.body
    document.body.appendChild(infoElement);

    var chart = new ZoomCharts.NetChart({
        container: chartContainer,
        data: {
            url: "/dvsl/data/net-chart/basic-example.json"
        },
        style: {
            linkStyleFunction: function (link) {
                link.items = [{
                    // add a star at the source node
                    image: "/dvsl/data/net-chart/icons.png",
                    imageSlicing: [0, 0, 16, 16],
                    px: -1,
                    py: 0,
                    lx: 8,
                    ly: 0
                }];
            }
        },
        events: {
            onHoverChange: function (event, args) {
                var content = "";
                // fill the info popup based on the node that was hovered.
                if (args.hoverItem) {
                    content = "Item hovered";
                } else if (args.hoverNode) {
                    content = "Node hovered";
                } else if (args.hoverLink) {
                    content = "Link hovered";
                }

                infoElementVisible = !!content;
                infoElement.innerHTML = content;
                infoElement.style.display = infoElementVisible ? "block" : "none";
            }
        }
    });

    function movePopup(event) {
        infoElement.style.top = event.pageY + "px";
        infoElement.style.left = event.pageX + "px";
    }

    // attach event handlers that move the info element with the mouse cursor.
    chartContainer.addEventListener("mousemove", movePopup, true);
    chartContainer.addEventListener("pointermove", movePopup, true);

    // function should be called whenever the chart is removed
    function disposeDemo() {

        chartContainer.removeEventListener("mousemove", movePopup);
        chartContainer.removeEventListener("pointermove", movePopup);

        // remove the menu element that was created dynamically
        infoElement.parentNode.removeChild(infoElement);

        // only required for documentation page on zoomcharts.com
        disposeDemo = null;
    }

{
    "nodes": [
        {
            "id": "n1",
            "loaded": true,
            "style": {
                "fillColor": "rgba(236,46,46,0.8)",
                "label": "Node1"
            }
        },
        {
            "id": "n2",
            "loaded": true,
            "style": {
                "fillColor": "rgba(47,195,47,0.8)",
                "label": "Node2"
            }
        },
        {
            "id": "n3",
            "loaded": true,
            "style": {
                "fillColor": "rgba(28,124,213,0.8)",
                "label": "Node3"
            }
        }
    ],
    "links": [
        {
            "id": "l1",
            "from": "n1",
            "to": "n2",
            "style": {
                "fillColor": "rgba(236,46,46,1)",
                "toDecoration": "arrow"
            }
        },
        {
            "id": "l2",
            "from": "n2",
            "to": "n3",
            "style": {
                "fillColor": "rgba(47,195,47,1)",
                "toDecoration": "arrow"
            }
        },
        {
            "id": "l3",
            "from": "n3",
            "to": "n1",
            "style": {
                "fillColor": "rgba(28,124,213,1)",
                "toDecoration": "arrow"
            }
        }
    ]
}