我正在构建一个具有多个用户光标的协作编码环境。当其他用户在光标上悬停时,我需要在工具提示中显示用户的昵称(就像谷歌文档一样)。我尝试了注入DOM到我给光标的类中的所有方法,但是工具提示就是不显示。
如何在用户悬停在光标上时,在光标(插入符号)上显示工具提示?
如何在用户悬停在光标上时,在光标(插入符号)上显示工具提示?
.ace-multi-cursor {
pointer-events: auto;
}
参考:https://github.com/ajaxorg/ace/issues/2720
标题/工具提示
我正在使用ace-collab-ext。为了在插入符上方添加用户名,我编辑了AceCursorMarker.js,在其中添加了<span class="ace-multi-cursor-username" style="background-color: ${this._color}; top: -8px; position: relative;">${this._title}</span>
,并重新编译 ace-collab-ext.min.js。以下是我添加标题的位置:
// Caret Top
html.push(
'<div class="ace-multi-cursor ace_start" style="',
`height: ${5}px;`,
`width: ${6}px;`,
`top: ${top - 2}px;`,
`left: ${left + 4}px;`,
`background-color: ${this._color};`,
`"><span class="ace-multi-cursor-username" style="background-color: ${this._color}; top: -8px; position: relative;">${this._title}</span></div>`
);
也许有一种更适合您的简单方法,但这是我所用的方式,特别是保持背景颜色永久不变,因为我通过js/css尝试的方法在初始化后没有持续存在(cursorManager.addCursor)。
CSS
这是我解决方案中添加的全部css:
.ace-multi-cursor {
position: absolute;
pointer-events: auto;
}
.ace-multi-cursor:hover > .ace-multi-cursor-username {
opacity: 1;
}
.ace-multi-cursor-username {
opacity: 0;
pointer-events: auto;
}