From b980fe11062ce660c40f2e948fcab8df5e83042b Mon Sep 17 00:00:00 2001
From: Aasim Khan <aasimkhan30@gmail.com>
Date: Wed, 15 Jun 2022 18:23:18 -0700
Subject: [PATCH] Hiding description tooltip on escape key.  (#19741)

* Hiding text tooltip on escape

* Fixing hover event
---
 .../browser/modelComponents/text.component.ts | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/sql/workbench/browser/modelComponents/text.component.ts b/src/sql/workbench/browser/modelComponents/text.component.ts
index df5cf0ccf0..b485686ea3 100644
--- a/src/sql/workbench/browser/modelComponents/text.component.ts
+++ b/src/sql/workbench/browser/modelComponents/text.component.ts
@@ -19,6 +19,8 @@ import * as DOM from 'vs/base/browser/dom';
 import { ILogService } from 'vs/platform/log/common/log';
 import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { errorForeground } from 'vs/platform/theme/common/colorRegistry';
+import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+import { KeyCode } from 'vs/base/common/keyCodes';
 
 export enum TextType {
 	Normal = 'Normal',
@@ -49,7 +51,7 @@ const errorTextClass = 'error-text';
 			<p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden"></p>
 			<div #textContainer id="textContainer"></div>
 			<span *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</span>
-			<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description" role="img">
+			<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description" role="img" (mouseenter)="showTooltip($event)" (focus)="showTooltip($event)" (keydown)="onDescriptionKeyDown($event)">
 				<div class="modelview-text-tooltip-content" [innerHTML]="description"></div>
 			</div>
 		</div>
@@ -226,6 +228,29 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 		element.style.fontWeight = this.CSSStyles['font-weight']?.toString();
 		return element;
 	}
+
+	public showTooltip(e: Event): void {
+		const descriptionDiv = <HTMLElement>e.target;
+		const tooltip = <HTMLElement>(descriptionDiv.querySelector('.modelview-text-tooltip-content'));
+		tooltip.style.display = '';
+	}
+
+	public onDescriptionKeyDown(e: Event): void {
+		if (e instanceof KeyboardEvent) {
+			let event = new StandardKeyboardEvent(e);
+			const descriptionDiv = <HTMLElement>e.target;
+			const tooltip = <HTMLElement>(descriptionDiv.querySelector('.modelview-text-tooltip-content'));
+			if (event.equals(KeyCode.Escape)) {
+				tooltip.style.display = 'none';
+				event.stopPropagation();
+				event.preventDefault();
+			} else if (event.equals(KeyCode.Enter)) {
+				tooltip.style.display = '';
+				event.stopPropagation();
+				event.preventDefault();
+			}
+		}
+	}
 }
 
 registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {