Allow to use Popup as a generic Popover (do not hard-code orientation)

[krassowski]

Problem

We would like to use the Popup component in inverse orientation for LSP-RetroLab integration, see jupyter-lsp/jupyterlab-lsp#690. Linking @jtpio's graphic:

this is due to different placement in RetroLab (in JupyterLab the indicator is in statusbar and it makes sense for the popup to show above, but in RetroLab it is in the toolbar area and it does not fit if it is opening above).

Currently the placement is hardcoded by privilege: 'forceAbove' in:

jupyterlab/packages/statusbar/src/components/hover.tsx

Lines 144 to 164 in d48e0c0

	private _setGeometry(): void {
	let aligned = 0;
	const anchorRect = this._anchor.node.getBoundingClientRect();
	const bodyRect = this._body.node.getBoundingClientRect();
	if (this._align === 'right') {
	aligned = -(bodyRect.width - anchorRect.width);
	}
	const style = window.getComputedStyle(this._body.node);
	HoverBox.setGeometry({
	anchor: anchorRect,
	host: document.body,
	maxHeight: 500,
	minHeight: 20,
	node: this._body.node,
	offset: {
	horizontal: aligned
	},
	privilege: 'forceAbove',
	style
	});
	}

Proposed Solution

The Popup should either:

• a) use above as default, but not be forced to display above if it does not fit, or
• b) be configurable to allow to specify below, or
• c) as indeed Popup suggest that it should go up, it could instead inherit from a new Popover which would not have placement restriction.

Which one of a/b/c would you recommend?

Additional context

Analogous Popover component of other frameworks usually allows for any placement:

• from moderate 4 sides in Bootstrap: https://getbootstrap.com/docs/4.0/components/popovers/
• through 12 possible placements in ng-bootstrap: https://ng-bootstrap.github.io/#/components/popover/examples
• to dozens combinations in mui: https://mui.com/components/popover/

[krassowski]

And should we then move it to ui-components from statusbar?