fix Issue #237947: Tooltip for Close Button in Dialog Box is Obscure…

[g122622]

This PR fixes Issue #237947: Tooltip for Close Button in Dialog Box is Obscured by the Dialog Itself

Overview

In dialog.css, the z-index of the dialog modal box is set to 2600:

/** Dialog: Modal Block */
.monaco-dialog-modal-block {
	position: fixed;
	height: 100%;
	width: 100%;
	left:0;
	top:0;
	z-index: 2600;
	display: flex;
	justify-content: center;
	align-items: center;
}

The tooltip is implemented by the contextView, and its z-index is dynamically assigned by JavaScript rather than being statically defined in CSS:

//src\vs\base\browser\ui\contextview\contextview.ts
this.view.style.zIndex = `${2575 + (delegate.layer ?? 0)}`;

For tooltips (i.e., hover), its layer is specified by HoverContextViewDelegate as 1, so this JavaScript code above calculates its z-index as 2576, which is lower than the z-index of the dialog mentioned earlier, causing it to be obscured.

Changes

Modified the HoverContextViewDelegate class in src\vs\base\browser\ui\contextview\contextview.ts to change its layer to 26.

Testing

I have used my own TypeScript project to test out this feature.

Before this fix:

After this fix: