HTML Tooltip remains sticky when node is moved

I am using a HTML tooltip with the following code -

    return $(go.HTMLInfo, {
        show: (obj) => {
            const mousePt = diagram.lastInput.viewPoint;
            tooltipDiv.style.left = `${mousePt.x + 10}px`;
            tooltipDiv.style.top = `${mousePt.y + 20}px`;

            const tooltipContent = getTooltip(obj);

            ReactDOM.render(tooltipContent, tooltipDiv);

            tooltipDiv.style.display = 'block';
        },
        hide: () => {
            tooltipDiv.style.display = 'none';
        },
    });

The tooltip seems to be stuck when the node is moved. Please see the following gif. I want to achieve either of the two behaviours here -

  • Make tooltip disappear when the node is selected.
  • Make tooltip move with the node as the node is repositioned.

Does https://gojs.net/latest/samples/dataVisualization.html do something more like what you want?

It has the HTML element follow the mouse. In your case you would need to override DraggingTool.doMouseMove to update the position of the tooltip.

Can I in some way hide the tooltip when a node is selected?

Yes, such behaviors are usually implemented in a “ChangedSelection” DiagramEvent listener.
https://gojs.net/latest/intro/events.html#ChangedSelection

    const draggingTool = diagram.toolManager.draggingTool;
    draggingTool.doMouseMove = function overrideMouseMove() {
        const diagramParent = diagram.div.parentNode;
        const tooltipDiv = diagramParent.querySelector(`#${TOOLTIP_DIV_ID}`);
        if (tooltipDiv) {
            tooltipDiv.style.display = "none";
        }

        go.DraggingTool.prototype.doMouseMove.call(draggingTool);
    }

This works for me. Thanks.