HTML Tooltip remains sticky when node is moved

GoJS
1

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';
        },
    });

tooltip stuck gojs
tooltip stuck gojs1886×623 228 KB

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.
2

Does Data Visualization GoJS Sample 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.

3

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

4

Yes, such behaviors are usually implemented in a “ChangedSelection” DiagramEvent listener.
GoJS Events -- Northwoods Software

5 
    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.