Question

我正在构建一个具有多个用户游标的协作编码环境。当其他用户在工具提示中将鼠标悬停在光标上时，我需要显示用户的昵称（例如google docs）。我已经尝试了各种方法，我可以想到将DOM注入到我给光标的类中，但工具提示只是没有显示出来。

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

Answer 1

不幸的是，做起来并不容易。并且需要更多的代码，而不是我可以添加到这个答案。但是github上有几种可用的实现，例如https://github.com/sharelatex/web-sharelatex/blob/a91ec74d1256ad063cd37693aab620b6f1a6ce0d/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee#L102，您可以在https://www.sharelatex.com/上进行测试

Answer 2

我知道这已经晚了，但将来可能对某人有所帮助。

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

<强>悬停

标记节点在Ace中有.bashrc，因此悬停基本上已禁用，需要重新启用。

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

pointer-events: auto

参考：https://github.com/ajaxorg/ace/issues/2720

<强>标题/工具提示

我正在使用ace-collab-ext。因此，要在插入符号上方添加用户名，我通过添加.ace-multi-cursor { pointer-events: auto; }并重新编译ace-collab-ext.min.js来编辑AceCursorMarker.js。下面是我添加标题范围的地方：

<span class="ace-multi-cursor-username" style="background-color: ${this._color}; top: -8px; position: relative;">${this._title}</span>

可能有一种更简单的方法可以做到这一点，但这种方式对我有用，特别是保持背景颜色永久性，因为我通过js / css进行的尝试在初始化后没有持久化（cursorManager.addCursor ）。

<强> CSS

这是我添加到我的解决方案中的总css：

// 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>`
);

我的解决方案最终看起来和功能完全类似于Google文档标记，插入标记和工具提示。

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

2 个答案: