Get node bounds on hover

GoJS
1

We are trying to show a tooltip on the right side of the hovered node (aligned vertically center), it should work also with any zoom/scale applied

image
image889×131 7.66 KB

Currently, we are able to show it only on the point where hover happened with an additional 20px offset on Y.

 createToolTipTemplate(data: any, $): go.Adornment | go.HTMLInfo {
    const go = this.graphComponent.goObject;
    return $(go.HTMLInfo, {
      show: this.showToolTip.bind(this, data),
      hide: this.hideToolTip.bind(this),
    });
  }

  showToolTip(metaData, obj, diagram) {
    const viewportOffset = this.graphComponent.myDiagramComponent.diagramDiv.nativeElement.getBoundingClientRect();
    // these are relative to the viewport, i.e. the window
    const top = viewportOffset.top;
    const left = viewportOffset.left;
    const toolTipDIV = this.additionalGroupToolTip.nativeElement;
    const pt = diagram.transformDocToView(diagram.lastInput.documentPoint);
    toolTipDIV.style.left = pt.x + left + 20 + "px";
    toolTipDIV.style.top = pt.y + top + "px";
    toolTipDIV.innerHTML = metaData?.disabledToolTip;

image

How can we achieve the above (first image) positioning?

2

Instead of depending on the Diagram.lastInput, why not use obj.getDocumentPoint(go.Spot.Right) which you then convert to viewport coordinates?

3

Perfect. Thanks, Walter.