Removing 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.

[brijeshb42]

@kubocob Here is something that I tried and should work for your use case.

const editor = /* your editor instance */;
const messageContribution = editor.getContribution('editor.contrib.messageController');
const diposable = editor.onDidAttemptReadOnlyEdit(() => {
  messageContribution.showMessage('Your reason to not allow editing.', editor.getPosition());
});

This code will immediately override the default Cannot edit read-only editor with your custom message.

[kubocob]

It would be nice, if the message tooltip could be customisable. This could be used for explanation of the “custom” reason, why the editor is in read-only state:

• “You need to save the file locally before editing”
• “Text is locked for editing”
• “You are previewing the previous version of the file”