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

Question

我正在构建一个具有多个用户光标的协作编码环境。当其他用户将鼠标悬停在工具提示中的光标上时，我需要显示用户的昵称(就像 google docs 那样)。我已经尝试了所有我能想到的将 DOM 注入(inject)到我给光标的类中的方法，但工具提示就是不显示。

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

Answer 1

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

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

悬停

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

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

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

引用:https://github.com/ajaxorg/ace/issues/2720

标题/工具提示

我使用的是 ace-collab-ext。因此，为了在插入符号上方添加用户名，我通过添加 <span class="ace-multi-cursor-username" style="background-color: ${this._color}; top: -8px; position: relative;">${this._title}</span> 编辑了 AceCursorMarker.js。并重新编译 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 文档标记、插入符号和工具提示完全一样。