在代码镜像编辑器中突出显示文本上方显示小弹出窗口

Question

我正在使用以下代码突出显示 Codemirror 中的文本段，Codemirror 是一个代码编辑器和语法荧光笔，从这里下载。

我无法从文档中弄清楚它应该如何实现。

for (var i = 0; i < array.length; i++)
{
        var range = array[i].split("-");
        editor.getDoc().markText({
            line: parseInt(range[0].split(":")[0]) - 1,
            ch: parseInt(range[0].split(":")[1])
        }, {
            line: parseInt(range[1].split(":")[0]) - 1,
            ch: parseInt(range[1].split(":")[1])
        }, {
            css: "color : white; background-color: red; border: 1px;"
        });
}

Desired output （与以下不同，只是为了概念的清除）

Answer 1

 .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; }.tooltip.tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 120%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; }.tooltip.tooltiptext::after { content: ""; position: absolute; top: -30%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #555 transparent; }.tooltip:hover.tooltiptext { visibility: visible; opacity: 1; }

 <div class="tooltip">Wait.. Can you hover over me! <span class="tooltiptext">Suprise!</span> </div>

来源： https://www.w3schools.com/howto/howto_css_tooltip.asp