Monaco-editor: Hover message for glyph decorations are not displayed

[akosyakov]

I have glyphMargin enabled and generally it looks good but hover messages are not displayed. You can easily reproduce it in the playground.

[alexdima]

Hm, I could get it working:

https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-rendering-glyphs-in-the-margin

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: {
            className: 'myContentClass',
            glyphMarginClassName: 'myGlyphMarginClass',
            glyphMarginHoverMessage: 'glyph margin hover message'
        }
    }
]);

[akosyakov]

There is no glyphMarginHoverMessage property in monaco.d.ts only hoverMessage: https://github.com/Microsoft/monaco-editor/blob/master/monaco.d.ts#L1547.

[alexdima]

Indeed, looks like Microsoft/vscode@51f2d539a60cf22955ccc64db39e060d39b85782 didn't adopt MarkedString in glyphMarginHoverMessage

[starpit]

FYI i don't see the hover message after making the noted modification to the noted example. 0.11.1, on any of firefox 59.0.2, chrome 65.0.3325.181, or electron 1.8.4

[rcjsuen]

@starpit The following code works for me.

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,1),
        options: {
            isWholeLine: true,
            className: 'myContentClass',
            glyphMarginClassName: 'myGlyphMarginClass',
            glyphMarginHoverMessage: { value: 'glyph margin hover message' }
        }
    }
]);

[starpit]

ah, thank you @rcjsuen the key difference from the comments above is in

            glyphMarginHoverMessage: { value: 'glyph margin hover message' }

compared to the above

            glyphMarginHoverMessage: 'glyph margin hover message'

which does not work

[rcjsuen]

@starpit Correct. The API has changed so you need to use IMarkdownString | IMarkdownString[].

https://github.com/Microsoft/monaco-editor/blob/6fa2a2ec0ee0809a855c1e88995b21145c43c22e/monaco.d.ts#L1167-L1170