Error tool tips lose styling when using overflowWidgetsDomNode

[parkertomatoes]

I was trying to solve the issue of clipped tool-tips when embedding an editor in a container with an overflow: hidden style.

This code reproduces that problem in the playground. Hover over the error squiggles to observe.

var jsCode = [
	'this is an error'
].join('\n');

const container = document.getElementById("container");
const subContainer = document.createElement('div');
container.appendChild(subContainer);

subContainer.style.marginTop = '100px';
subContainer.style.overflow = 'hidden';
subContainer.style.height = '200px';

var editor = monaco.editor.create(subContainer, {
	value: 'this is an error',
	language: "javascript"
});

I tried to fix it by using the overflowWidgesDomNode option:

var editor = monaco.editor.create(subContainer, {
	value: 'this is an error',
	language: "javascript",
        overflowWidgetsDomNode: document.body,
        fixedOverflowWidgets: true
});

Which worked, but all the styling disappears from the tool-tip:

I traced the issue to here:
https://github.com/microsoft/vscode/blob/master/src/vs/editor/contrib/hover/hover.ts#L339

Where a bunch of styles are added under .monaco-editor .monaco-hover. Adding this code to the playground code fixes the colors (though "peek problem") is still unstyled:

for (const styleElement of document.getElementsByTagName('style')) {
    styleElement.innerHTML = styleElement.innerHTML.replaceAll('.monaco-editor .monaco-hover', '.monaco-hover');
}

Is a bug, or am I using this feature incorrectly?

Thanks,

[blutorange]

Workaround for the CSS issue seems to be to add the monaco-editor style class to the container for the overflowWidgetsDomNode (see issue #2156)

document.querySelector('body').classList.add('monaco-editor');

But overflowWidgetsDomNode also seems to be having issues with events (e.g. renaming via F2 does not work), so this option probably shouldn't be used for now.

[kristw]

Thanks for the workaround!