Palette Tooltip is clipped inside narrow div

I have a palette on the left of diagram in a narrow vertical div (about 400px high by 40px wide)

Here is the template for the palette:

// the Palette's node template 
var paletteNodeTempl =
$(go.Node, "Auto",
  $(go.Shape, "Square", 
	{ width: 32, height: 32, fill: "white", strokeWidth: 0 }
  ),
  $(go.Shape,  
	{ width: 30, height: 30, fill: null, strokeWidth: 2 }
	, new go.Binding("figure", "fig") // use for vector geometry (using go.Shape)
	, new go.Binding("fill", "geofill")             // use for vector geometry (using go.Shape)
  ),
  {
	toolTip:  // define a tooltip for each palette entry
	  $("ToolTip",
		$(go.TextBlock, { margin: 4 },
		  new go.Binding("text", "tooltipText"))
	  )  // end of Adornment
  }
);

The palette sits on top the diagram to the left and because its narrow the tooltip gets clipped like this.
image

How can I fix this?

Implement the tooltip in HTML. GoJS Tooltips -- Northwoods Software