在Ace中悬停光标时显示工具提示

Question

我正在构建一个具有多个用户光标的协作编码环境。当其他用户在光标上悬停时，我需要在工具提示中显示用户的昵称（就像谷歌文档一样）。我尝试了注入DOM到我给光标的类中的所有方法，但是工具提示就是不显示。

如何在用户悬停在光标上时，在光标（插入符号）上显示工具提示？

- bitspook

---

注入DOM后，您必须重新应用工具提示。 - Farkhat Mikhalko

Answer 1

我知道现在有点晚了，但这可能会对未来的某个人有所帮助。

我在Ace中遇到了同样的问题，首先无法显示任何工具提示，其次无法在悬停时显示。

悬停

在Ace中，标记节点具有“pointer-events: none”，因此悬停基本上被禁用并需要重新启用。

将“pointer-events: auto”添加到标记/插入符号。 例如：

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

我的解决方案最终看起来和 Google Docs 的标记、光标和提示框完全一样，并且功能也相同。

- Palindrome

Answer 2

很不幸，这并不是一件简单的事情。需要的代码比我在这个答案中可以添加的还要多。但是在GitHub上有几个可用的实现，例如https://github.com/sharelatex/web-sharelatex/blob/a91ec74d1256ad063cd37693aab620b6f1a6ce0d/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee#L102，您可以在https://www.sharelatex.com/上测试它们。

- a user