Flipping tooltip anchor point when it extends past bounds

GoJS
#1

I’m looking for a way to change which corner is the anchor point for the tooltip when I hit the bound of the GraphObject. For example, if my node is drawn to the right, my tooltip runs off the page. I would like to switch the tooltip to make it visible.

#2

That’s not true – when I open Basic GoJS Sample and move the nodes to be at the corners of the viewport, any node tooltip is automatically positioned to be inside the viewport, not blindly off to one side that might be off-screen.

If you want to customize the positioning behavior for context menu Adornments relative to the Adornment.adornedObject, you can override ContextMenuTool.positionContextMenu.

Oh, but maybe you are using HTMLInfo context menus. In that case you should make your implementation of HTMLInfo.show smarter.

#3

Thanks for the response, I am using HTMLInfo.show since I render html content in my tooltip. Are there examples of “making it smarter” that I can view to help me along?

#4

It appears that none of our samples attempt to do what I think you are asking for.

Here is the code for ContextMenuTool.positionContextMenu, but that just deals with GoJS objects and thus uses a completely different coordinate system, so the code cannot be used directly:

ContextMenuTool.prototype.positionContextMenu = function(contextmenu, obj) {
  if (contextmenu.placeholder !== null) return;

  var diagram = this.diagram;
  if (diagram === null) return;

  var p = diagram.lastInput.documentPoint.copy();
  var ttb = contextmenu.measuredBounds;
  var viewb = diagram.viewportBounds;
  // when touch event -- shift towards the left, so it's not obscured by the finger
  if (diagram.lastInput.isTouchEvent) {
    p.x -= ttb.width;
  }
  // if extends too far to the right -- shift left
  if (p.x + ttb.width > viewb.right) {
    p.x -= ttb.width + 5;
  }
  // but don't go beyond the left edge of the viewport
  if (p.x < viewb.x) {
    p.x = viewb.x;
  }
  // if extends too far down -- shift up
  if (p.y + ttb.height > viewb.bottom) {
    p.y -= ttb.height + 5;
  }
  // but don't go beyond the top edge of the viewport
  if (p.y < viewb.y) {
    p.y = viewb.y;
  }
  contextmenu.position = p;
};

I suppose you could implement similar code that doesn’t use the GraphObject.measuredBounds of your context menu (because it’s HTML instead of a GraphObject). And that then calls Diagram.transformDocToView in order to convert the Point p from document coordinates to viewport coordinates.