diff --git a/src/vs/base/browser/ui/iconLabel/iconHoverDelegate.ts b/src/vs/base/browser/ui/iconLabel/iconHoverDelegate.ts
index 83c61d9bd159f..2f8fda8adf1ea 100644
--- a/src/vs/base/browser/ui/iconLabel/iconHoverDelegate.ts
+++ b/src/vs/base/browser/ui/iconLabel/iconHoverDelegate.ts
@@ -13,7 +13,7 @@ export interface IHoverDelegateTarget extends IDisposable {
 }
 
 export interface IHoverDelegateOptions {
-	text: IMarkdownString | string;
+	content: IMarkdownString | string | HTMLElement;
 	target: IHoverDelegateTarget | HTMLElement;
 	hoverPosition?: HoverPosition;
 	showPointer?: boolean;
diff --git a/src/vs/base/browser/ui/iconLabel/iconLabelHover.ts b/src/vs/base/browser/ui/iconLabel/iconLabelHover.ts
index fe0a1e52a7fbe..7f5ad71d04243 100644
--- a/src/vs/base/browser/ui/iconLabel/iconLabelHover.ts
+++ b/src/vs/base/browser/ui/iconLabel/iconLabelHover.ts
@@ -72,7 +72,7 @@ export function setupCustomHover(hoverDelegate: IHoverDelegate, htmlElement: HTM
 			if (hoverPreparation) {
 
 				const hoverOptions = {
-					text: localize('iconLabel.loading', "Loading..."),
+					content: localize('iconLabel.loading', "Loading..."),
 					target,
 					hoverPosition: HoverPosition.BELOW
 				};
@@ -87,7 +87,7 @@ export function setupCustomHover(hoverDelegate: IHoverDelegate, htmlElement: HTM
 				// awaiting the tooltip could take a while. Make sure we're still preparing to hover.
 				if (resolvedTooltip && hoverPreparation) {
 					const hoverOptions = {
-						text: resolvedTooltip,
+						content: resolvedTooltip,
 						target,
 						showPointer: hoverDelegate.placement === 'element',
 						hoverPosition: HoverPosition.BELOW
diff --git a/src/vs/workbench/browser/parts/compositeBarActions.ts b/src/vs/workbench/browser/parts/compositeBarActions.ts
index ed6ff755be09d..a0ae571b8d182 100644
--- a/src/vs/workbench/browser/parts/compositeBarActions.ts
+++ b/src/vs/workbench/browser/parts/compositeBarActions.ts
@@ -417,7 +417,7 @@ export class ActivityActionViewItem extends BaseActionViewItem {
 		this.hover.value = this.hoverService.showHover({
 			target: this.container,
 			hoverPosition,
-			text: this.computeTitle(),
+			content: this.computeTitle(),
 			showPointer: true,
 			compact: true,
 			skipFadeInAnimation
diff --git a/src/vs/workbench/contrib/terminal/browser/widgets/environmentVariableInfoWidget.ts b/src/vs/workbench/contrib/terminal/browser/widgets/environmentVariableInfoWidget.ts
index af556051eee49..c6af5f5c82a78 100644
--- a/src/vs/workbench/contrib/terminal/browser/widgets/environmentVariableInfoWidget.ts
+++ b/src/vs/workbench/contrib/terminal/browser/widgets/environmentVariableInfoWidget.ts
@@ -83,7 +83,7 @@ export class EnvironmentVariableInfoWidget extends Widget implements ITerminalWi
 			const actions = this._info.getActions ? this._info.getActions() : undefined;
 			this._hoverOptions = {
 				target: this._domNode,
-				text: new MarkdownString(this._info.getInfo()),
+				content: new MarkdownString(this._info.getInfo()),
 				actions
 			};
 		}
diff --git a/src/vs/workbench/contrib/terminal/browser/widgets/terminalHoverWidget.ts b/src/vs/workbench/contrib/terminal/browser/widgets/terminalHoverWidget.ts
index 7592f4324a927..36606fccb8119 100644
--- a/src/vs/workbench/contrib/terminal/browser/widgets/terminalHoverWidget.ts
+++ b/src/vs/workbench/contrib/terminal/browser/widgets/terminalHoverWidget.ts
@@ -50,7 +50,7 @@ export class TerminalHover extends Disposable implements ITerminalWidget {
 		const target = new CellHoverTarget(container, this._targetOptions);
 		const hover = this._hoverService.showHover({
 			target,
-			text: this._text,
+			content: this._text,
 			linkHandler: this._linkHandler,
 			// .xterm-hover lets xterm know that the hover is part of a link
 			additionalClasses: ['xterm-hover']
diff --git a/src/vs/workbench/services/hover/browser/hover.ts b/src/vs/workbench/services/hover/browser/hover.ts
index 73104497add1a..014d43d53b897 100644
--- a/src/vs/workbench/services/hover/browser/hover.ts
+++ b/src/vs/workbench/services/hover/browser/hover.ts
@@ -40,10 +40,10 @@ export interface IHoverService {
 
 export interface IHoverOptions {
 	/**
-	 * The text to display in the primary section of the hover. The type of text determines the
+	 * The content to display in the primary section of the hover. The type of text determines the
 	 * default `hideOnHover` behavior.
 	 */
-	text: IMarkdownString | string;
+	content: IMarkdownString | string | HTMLElement;
 
 	/**
 	 * The target for the hover. This determines the position of the hover and it will only be
diff --git a/src/vs/workbench/services/hover/browser/hoverWidget.ts b/src/vs/workbench/services/hover/browser/hoverWidget.ts
index 6161e0c1d4a54..f730994aecb75 100644
--- a/src/vs/workbench/services/hover/browser/hoverWidget.ts
+++ b/src/vs/workbench/services/hover/browser/hoverWidget.ts
@@ -17,7 +17,7 @@ import { AnchorPosition } from 'vs/base/browser/ui/contextview/contextview';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { MarkdownRenderer } from 'vs/editor/browser/core/markdownRenderer';
-import { isString } from 'vs/base/common/types';
+import { isMarkdownString } from 'vs/base/common/htmlContent';
 
 const $ = dom.$;
 type TargetRect = {
@@ -73,7 +73,7 @@ export class HoverWidget extends Widget {
 	) {
 		super();
 
-		this._linkHandler = options.linkHandler || (url => this._openerService.open(url, { allowCommands: (!isString(options.text) && options.text.isTrusted) }));
+		this._linkHandler = options.linkHandler || (url => this._openerService.open(url, { allowCommands: (isMarkdownString(options.content) && options.content.isTrusted) }));
 
 		this._target = 'targetElements' in options.target ? options.target : new ElementHoverTarget(options.target);
 
@@ -108,11 +108,15 @@ export class HoverWidget extends Widget {
 
 		const rowElement = $('div.hover-row.markdown-hover');
 		const contentsElement = $('div.hover-contents');
-		if (typeof options.text === 'string') {
-			contentsElement.textContent = options.text;
+		if (typeof options.content === 'string') {
+			contentsElement.textContent = options.content;
 			contentsElement.style.whiteSpace = 'pre-wrap';
+
+		} else if (options.content instanceof HTMLElement) {
+			contentsElement.appendChild(options.content);
+
 		} else {
-			const markdown = options.text;
+			const markdown = options.content;
 			const mdRenderer = this._instantiationService.createInstance(
 				MarkdownRenderer,
 				{ codeBlockFontFamily: this._configurationService.getValue<IEditorOptions>('editor').fontFamily || EDITOR_FONT_DEFAULTS.fontFamily }
@@ -168,7 +172,7 @@ export class HoverWidget extends Widget {
 		} else {
 			if (options.hideOnHover === undefined) {
 				// Defaults to true when string, false when markdown as it may contain links
-				hideOnHover = typeof options.text === 'string';
+				hideOnHover = typeof options.content === 'string';
 			} else {
 				// It's set explicitly
 				hideOnHover = options.hideOnHover;