Support IHoverOptions.anchorPosition

Fixes #106871

src/vs/workbench/contrib/terminal/browser/widgets/terminalHoverWidget.ts

@@ -12,6 +12,7 @@ import type { IViewportRange } from 'xterm';
 import { IHoverTarget, IHoverService } from 'vs/workbench/services/hover/browser/hover';
 import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { editorHoverHighlight } from 'vs/platform/theme/common/colorRegistry';
+import { AnchorPosition } from 'vs/base/browser/ui/contextview/contextview';
 
 const $ = dom.$;
 
@@ -46,7 +47,8 @@ export class TerminalHover extends Disposable implements ITerminalWidget {
 			text: this._text,
 			linkHandler: this._linkHandler,
 			// .xterm-hover lets xterm know that the hover is part of a link
-			additionalClasses: ['xterm-hover']
+			additionalClasses: ['xterm-hover'],
+			anchorPosition: AnchorPosition.BELOW
 		});
 		if (hover) {
 			this._register(hover);

src/vs/workbench/services/hover/browser/hover.ts

@@ -6,6 +6,7 @@
 import { createDecorator } from 'vs/platform/instantiation/common/instantiation';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { IMarkdownString } from 'vs/base/common/htmlContent';
+import { AnchorPosition } from 'vs/base/browser/ui/contextview/contextview';
 
 export const IHoverService = createDecorator<IHoverService>('hoverService');
 
@@ -79,6 +80,12 @@ export interface IHoverOptions {
 	 * - Markdown that contains no links where selection is not important
 	 */
 	hideOnHover?: boolean;
+
+	/**
+	 * Whether to anchor the hover above (default) or below the target. This option will be ignored
+	 * if there is not enough room to layout the hover in the specified anchor position.
+	 */
+	anchorPosition?: AnchorPosition;
 }
 
 export interface IHoverAction {

src/vs/workbench/services/hover/browser/hoverWidget.ts

@@ -30,7 +30,7 @@ export class HoverWidget extends Widget {
 	private readonly _linkHandler: (url: string) => any;
 
 	private _isDisposed: boolean = false;
-	private _anchor: AnchorPosition = AnchorPosition.ABOVE;
+	private _anchor: AnchorPosition;
 	private _x: number = 0;
 	private _y: number = 0;
 
@@ -60,12 +60,13 @@ export class HoverWidget extends Widget {
 		this._target = 'targetElements' in options.target ? options.target : new ElementHoverTarget(options.target);
 
 		this._hover = this._register(new BaseHoverWidget());
-
 		this._hover.containerDomNode.classList.add('workbench-hover', 'fadeIn');
 		if (options.additionalClasses) {
 			this._hover.containerDomNode.classList.add(...options.additionalClasses);
 		}
 
+		this._anchor = options.anchorPosition ?? AnchorPosition.ABOVE;
+
 		// Don't allow mousedown out of the widget, otherwise preventDefault will call and text will
 		// not be selected.
 		this.onmousedown(this._hover.containerDomNode, e => e.stopPropagation());
@@ -165,12 +166,26 @@ export class HoverWidget extends Widget {
 		}
 
 		// Get vertical alignment and position
-		const targetTop = Math.min(...targetBounds.map(e => e.top));
-		if (targetTop - this._hover.containerDomNode.clientHeight < 0) {
-			this._anchor = AnchorPosition.BELOW;
-			this._y = Math.max(...targetBounds.map(e => e.bottom)) - 2;
+		if (this._anchor === AnchorPosition.ABOVE) {
+			const targetTop = Math.min(...targetBounds.map(e => e.top));
+			if (targetTop - this._hover.containerDomNode.clientHeight < 0) {
+				const targetBottom = Math.max(...targetBounds.map(e => e.bottom));
+				this._anchor = AnchorPosition.BELOW;
+				this._y = targetBottom - 2;
+			} else {
+				this._y = targetTop;
+			}
 		} else {
-			this._y = targetTop;
+			console.log('below');
+			const targetBottom = Math.max(...targetBounds.map(e => e.bottom));
+			if (targetBottom + this._hover.containerDomNode.clientHeight > window.innerHeight) {
+				console.log(targetBottom, this._hover.containerDomNode.clientHeight, window.innerHeight);
+				const targetTop = Math.min(...targetBounds.map(e => e.top));
+				this._anchor = AnchorPosition.ABOVE;
+				this._y = targetTop;
+			} else {
+				this._y = targetBottom - 2;
+			}
 		}
 
 		this._hover.onContentsChanged();