Monaco-editor: regression: hoverMessage and glyphHoverMessage are ignored in IModelDecorationOptions

Created on 13 May 2018  路  3Comments  路  Source: microsoft/monaco-editor

The hoverMessage and glyphHoverMessage in IModelDecorationOptions for the DeltaDecorations in the Editor seem to be broken. Have seen this on multiple machines, thought it was something I had done wrong at first, but can repro in the online playground as well.

monaco-editor version: 0.12 & 0.13.1 (Playground Editor Version)
Browser: Edge & Firefox
OS: Windows 10 16299
Steps or JS usage snippet reproducing the issue:

From glyphs in margin demo:

var jsCode = [
    '"use strict";',
    'function Person(age) {',
    '   if (age) {',
    '       this.age = age;',
    '   }',
    '}',
    'Person.prototype.getAge = function () {',
    '   return this.age;',
    '};'
].join('\n');

var editor = monaco.editor.create(document.getElementById("container"), {
    value: jsCode,
    language: "javascript",
    glyphMargin: true
});

var decorations = editor.deltaDecorations([], [
    {
        range: new monaco.Range(3,1,3,10),
        options: {
            isWholeLine: true,
            className: 'myContentClass',
            glyphMarginClassName: 'myGlyphMarginClass',
            hoverMessage: ["Testing", "**???**"],
            glyphMarginHoverMessage: "Testing this out..."
        }
    }
]);

// You can now use `decorations` to change or remove the decoration

If you hover mouse over glyph or line, no hover text appears. This worked fine in v0.10.

(you're also missing the changelog for 0.13, but looks like I'll have to downgrade :( )

*question

All 3 comments

@hawkerm Regarding the changelog, it's there in the v0.13.0 tag but that tag seems to be ahead of master now that you mention it.

@hawkerm Both glyphMarginHoverMessage and hoverMessage are now instances of IMarkdownString.

Please try the following code instead:

var jsCode = [
    '"use strict";',
    'function Person(age) {',
    '   if (age) {',
    '       this.age = age;',
    '   }',
    '}',
    'Person.prototype.getAge = function () {',
    '   return this.age;',
    '};'
].join('\n');

var editor = monaco.editor.create(document.getElementById("container"), {
    value: jsCode,
    language: "javascript",
    glyphMargin: true
});

var decorations = editor.deltaDecorations([], [
    {
        range: new monaco.Range(3,1,3,10),
        options: {
            isWholeLine: true,
            className: 'myContentClass',
            glyphMarginClassName: 'myGlyphMarginClass',
            hoverMessage: [
                { value: "Testing" },
                { value: "**???**" }
            ],
            glyphMarginHoverMessage: { value: "Testing this out..." }
        }
    }
]);

Thanks @rcjsuen for the quick replies. Why the change in the API? What does the isTrusted property provide?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

akosyakov picture akosyakov  路  16Comments

gynet picture gynet  路  22Comments

ascoders picture ascoders  路  22Comments

zuznow picture zuznow  路  17Comments

mbana picture mbana  路  18Comments