Ask questionsRemoving the tooltip on the read-only editor that says 'cannot edit in read-only editor'

Hi, I tried to remove the tooltip that says 'cannot edit in a read-only editor using CSS. But, it seems that the CSS although applied is not working.

Given below is the screenshot of the issue that I am facing:


Below given is the editor options that I am setting

value: this.configOriginal, language: 'json', theme: this.theme, scrollBeyondLastLine: false, contextmenu: false, readOnly: true, cursorWidth: 0,

And given below is the CSS that I am trying to use to hide the tooltip: .monaco-alert { display: none !important; visibility: hidden !important; }

Can anyone please help me solve this? I have been struggling with this since a long time.

Thank you so much.


Answer questions brijeshb42

@rakhtar92 for your requirement, you can do this -

const editor = /* your editor instance */;
const messageContribution = editor.getContribution('editor.contrib.messageController');
const diposable = editor.onDidAttemptReadOnlyEdit(() => {

This will hide the tootltip immediately. There isn't even a flicker for a moment when closing the tooltip.

Brijesh Bittu brijeshb42 Bengaluru, India Web enthusiast. Frontend and Backend.
Github User Rank List