在ace中显示悬停光标的工具提示

Show tooltip on hovering cursors in ace

本文关键字：光标 工具提示 悬停 显示 ace      更新时间：2023-09-26

我正在构建一个具有多个用户游标的协作编码环境。我需要显示用户的nick当其他用户悬停在他们的光标在工具提示(如谷歌文档)。我已经尝试了所有我能想到的将DOM注入给光标的类的方法，但是工具提示就是没有显示出来。

当用户将鼠标悬停在光标上时，如何在光标上显示工具提示(插入符号)?

我知道这有点晚了，但它可能会在未来帮助别人。

我在Ace中也有同样的问题，我首先不能得到任何工具提示显示，其次不能让它在悬停时显示。

标记节点在Ace中有pointer-events: none，所以悬停基本上是禁用的，需要重新启用。

将pointer-events: auto添加到标记/插入符号中。即:

.ace-multi-cursor {
    pointer-events: auto;
}

裁判:https://github.com/ajaxorg/ace/issues/2720

标题/提示

我用的是ace- lab-ext。因此，为了在插入符号上方添加用户名，我通过添加<span class="ace-multi-cursor-username" style="background-color: ${this._color}; top: -8px; position: relative;">${this._title}</span>和重新编译ace- lab-ext.min.js编辑了AceCursorMarker.js。下面是我添加标题span的地方:

// 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;
}

我的解决方案最终看起来和功能完全像谷歌文档的标记，插入符号和工具提示。

不幸的是，这不是一件容易的事。需要更多的代码，我不能添加到这个答案。但是在github上有几种实现，例如https://github.com/sharelatex/web-sharelatex/blob/a91ec74d1256ad063cd37693aab620b6f1a6ce0d/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee#L102，您可以在https://www.sharelatex.com/

上进行测试
相关文章：