Show tooltip when hovering over ace
I am creating a collaborative coding environment that has multiple custom cursors. I need to show a user's nickname when another user hovers over a tooltip (e.g. google docs). I've tried everything I can think of by injecting the DOM into the class I give to the cursor, but the tooltips just don't appear.
How can I show a tooltip on the cursor (carriage) when the user hovers over it?
source to share
Unfortunately, this is not trivial. And more code is required than I can add to this answer. But there are several implementations on github like https://github.com/sharelatex/web-sharelatex/blob/a91ec74d1256ad063cd37693aab620b6f1a6ce0d/public/coffee/ide/editor/directives/aceEditor/highanlights/Highlights which you can check# at https://www.sharelatex.com/
source to share
I know this is late, but it might help someone in the future.
I had the same problem in Ace where I couldn't get the tooltip at first, and secondly, I couldn't display it on hover.
Hover
Marker nodes are pointer-events: none
in Ace, so hover is essentially disabled and needs to be re-enabled.
Add pointer-events: auto
to marker / caret. I.e:
.ace-multi-cursor {
pointer-events: auto;
}
Link: https://github.com/ajaxorg/ace/issues/2720
Title / Tooltip
I used 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 recompiling ace-collab-ext.min.js. Below I've added a range of titles:
// 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 might be an easier way to do this that suits you, but this way worked for me, especially with preserving the background color, since the attempts I made through js / css did not persist after initialization (cursorManager.addCursor).
CSS
This is the total amount of 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 marker, caret, and tooltip.
source to share