I am building a collaborative coding environment which has multiple user cursors. I need to show user's nick when other user hover on their cursor in a tooltip (like google docs does). I've tried every way I could think of injecting DOM into the class that I give to the cursor, but tooltips just don't show up.

How can I show a tooltip on the cursor (caret) when a user hovers on it?

I am building a collaborative coding environment which has multiple user cursors. I need to show user's nick when other user hover on their cursor in a tooltip (like google docs does). I've tried every way I could think of injecting DOM into the class that I give to the cursor, but tooltips just don't show up.

How can I show a tooltip on the cursor (caret) when a user hovers on it?

• javascript
• ace-editor

Share Improve this question Follow edited Aug 20, 2014 at 12:38 Johnny Willemsen 3,00211 gold badge1616 silver badges1717 bronze badges asked Aug 20, 2014 at 11:38 bitspookbitspook 66977 silver badges1919 bronze badges 1

• after injecting dom you must reapply tooltip – Farkhat Mikhalko Commented Aug 20, 2014 at 12:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I know this is late but it might help someone in the future.

I had the same issue in Ace where I firstly couldn't get any tooltip showing, and secondly couldn't get it to show on hover.

Hover

Marker nodes have pointer-events: none in Ace, so hover is essentially disabled and needs to be re-enabled.

Add pointer-events: auto to the marker/caret. I.e:

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

Ref: https://github./ajaxorg/ace/issues/2720

Title/Tooltip

I was using ace-collab-ext. So to add the username above the caret I edited AceCursorMarker.js by adding <span class="ace-multi-cursor-username" style="background-color: ${this._color}; top: -8px; position: relative;">${this._title}</span> and repiling ace-collab-ext.min.js. Below is where I added the title 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>`
);

There may be an easier way to do this that suits you, but this way worked for me especially with keeping the background-color permanent, as the attempts I made through js/css didn't persist after initialisation (cursorManager.addCursor).

CSS

This is the total css I added to my solution:

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

My solution ended up looking and functioning exactly like the Google Docs marker, caret and tooltip.

Unfortunately it's not trivial to do. And requires more code than i can add to this answer. But there are several implementations available on github e.g https://github./sharelatex/web-sharelatex/blob/a91ec74d1256ad063cd37693aab620b6f1a6ce0d/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee#L102 which you can test on https://www.sharelatex./