Show tooltip on hovering cursors in ace - javascript

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 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.com/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 recompiling 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.com/sharelatex/web-sharelatex/blob/a91ec74d1256ad063cd37693aab620b6f1a6ce0d/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee#L102 which you can test on https://www.sharelatex.com/

Related

How can adding a JavaScript background effect disable controls in my element?

First of all, here's a link to a page I'm working on, so you can see what I mean for yourself:
http://37.60.224.20/~mdg17761/mirzarasic.com/about-me/
And, here's a link to the effect in the background:
https://github.com/jnicol/particleground
If you go to the page, you'll notice you can't scroll the section in the middle. The website link also isn't clickable and you can't select any of the text.
I'm using Wordpress with the Divi theme to build the website, as well.
I've added the code which creates the background in a Code Module and, it looks like this:
<script>
document.addEventListener("DOMContentLoaded", function() {
particleground(document.getElementById("particleground"), {
dotColor: '#ffffff',
lineColor: '#blue',
particleRadius: 0
});
var intro = document.getElementById('intro');
intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
}, false);
</script>
<style>
#particleground {
position: relative;
}
#particleground canvas {
position: absolute;
z-index: 996;
opacity: 0.2;
}
</style>
Removing the Code Module makes the entire section work again. I've been looking through the source of the plugin, but, I simply don't have enough experience with JavaScript and can't figure out what might be doing this.
I assume you want the particle canvas in the background?
You'll need to change the z-index of your "particle ground", as it's rendering on top of your content area. I'd consider adjusting where you put the code for the particle ground (either higher in the DOM for a naturally lower z-index, or at the bottom closer to the </body> tag and setting the z-index to 0 giving it a structurally lower presence while still needing to lower the z-index.
#particleground {
position: relative;
z-index: 0;
}
(Note, with this you can remove the z-index from your #particleground canvas selector.
If you don't want the center section to be white (which the above code will do), you can set the background of it to transparent to let the canvas show through it:
.et_pb_section_1 {
background: transparent;
}
If you really want the particles "on top" for some reason, while I strongly recommend against it, you can add pointer-events: none; to #particleground - read more here

Radio button remove down correctly

I've two radio buttons with Drop down and I need to put the drop down
in parallel to the second radio button,when we add to the css code
the following its working but this is not a good solution since if I've
bigger page with other control this can override them either
#__box0 {
margin-top: 20px;
margin-left: 20px;
}
there is another option to do that with CSS?
http://jsbin.com/ziziqeyopu/edit?css,js,output
The Html is renders in the renderer method
This is SAPUI5
http://openui5.org/
code but for the question its not relevant since
renderer is related to pure html/css...
i've tried with the following which doesnt works.
.mylist-content>div:first-child {
margin-right:30px
margin-top:50px
}
.mylist-radiolist>DIV:last-child {
margin-left: 30px;
margin-top:100px;
}
If you still haven't figured it out, give this a try:
.mylist-content #__box0 {
position: relative;
top: 20px;
left: 20px;
}
What you see above should do the same thing as your first attempt, but not interfere with anything else on your page, by:
Adding extra application restrictions to the CSS rule, by having the .mylist-content scope restriction (even though this should not be necessary, in theory, because #__box0 is an ID and should be unique on the page).
Shifting the position of the dropdown without affecting any other elements - this is done with position: relative and the corresponding top and left offsets.
Without knowledge of SAP UI and/or your particular situation, I doubt someone will be able to give you a more appropriate answer.

CSS Positioning a table and blocks

¡Hello! I designed a Budget Calculator and implemented it in Drupal 7. You can see the result here:
http://www.delengua.es/curso-espanol-espana/calculadora-de-precios
I'm sure it has a lot of errors. But the one i want to fix is related to the position of the blocks. You may see that if you click on some option in the optgroup called "Cursos" (or in another one), you'll se an information square sided to the right of the table (i mean the table that contains the form). Specifically, if you click on "Cursos específicos" and you select something in the new optgroup, you'll get two information blocks. As you can see if you inspect them, they're positioned like this:
display: none;
position: absolute;
right: 6.5%;
top: 12.5%;
margin: 15px 15px;
width: 220px;
height: auto;
padding: 10px 10px;
Though that looks as working fine, it changes the position in firefox, and i'm frightened that it will cause more trouble. So my question is... would it be any other way to position it in relation to the table? I mean, the 'y' position should be the same as the table, and the 'x', the same + some number of pixels. I think it can be done through two ways:
a) With JavaScript (i don't know how, but i guess i could learn googling it).
b) Just with html and css.
As i prefer this option, i've tried to group the table and the information labels in only one '<div>', to declare the labels as 'inline:block;', to float them to the right, but when i do one of those things, i cannot modify the "top" position property. I got that ideas from other threads in Stackoverflow, but i don't know what can i try else. So i'll really thank any help.
Making a parent container position: relative will make the position: absolute on these elements relative to that parent container. Also, top/bottom/left/right attributes only apply for position: fixed, position: relative, and position: absolute. Floated elements ignore them unless one of those positions is defined, in which case the float is ignored.
I've tried something close to what you've said in the question and it worked for me without any problems.
First of all, wrap your form and infos in one div, like this:
<div id="wrap">
<form id="calculadoracont" method="post" onclick="test()">
// Your form
</form>
<div class="informacion" id="infoespecificos">
// Your info
</div>
<div class="informacion2" id="infoliteratura">
// Your info
</div>
// Your other infos
</div>
And in your css, just float them to where you want:
form {
float: left;
}
.informacion, .informacion2 {
// Remove the position absolute
float: right;
}
That will give you the same layout without absolute positioning.
Give it a try and let me know if it helps!

Transparent DIV Overlay

OK, here's what I'm trying to do :
I have a page structure, with several divs, nested divs, etc
I want to handle 2 different types of events : click and hover.
For those 2 events, I want a transparent DIV overlay (with some colour tint?) above the aforementioned div covering all of it.
How can this be done?
Any ideas?
Here's a fiddle : http://jsfiddle.net/cFw7d/2/ (though I somehow can't make it show properly - it's a jQuery Mobile page actually...)
I would go for the :after pseudo class in this case.
Just add on the CSS the following:
.msp-selected-hover:after {
content: ' ';
position: absolute;
background: rgba(0,0,120,0.4);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
You might want to create different classes for hover and clicks as well as targetting just certain elements.
Your edited fiddle: http://jsfiddle.net/cFw7d/3/
If you want a block on top of another block, and be able to click on the block below, you will have to use pointer-events: none CSS3 property.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

How does Google create the checkmark for its input checkboxes on the form for creating a new Google account?

Scroll to the bottom of the page: https://accounts.google.com/SignUp
The checkbox itself is just CSS - borders, background colors, etc. But I don't see anything in the DOM/CSS that accounts for the actual check mark.
Found this css rule in chrome inspect element
input[type="checkbox"]:checked::after {
content: url(//ssl.gstatic.com/ui/v1/menu/checkmark.png);
display: block;
position: absolute;
top: -6px;
left: -5px;
}
Content links to this image
https://ssl.gstatic.com/ui/v1/menu/checkmark.png
As Joel put in his answer, it appears the CSS links to a content image.
However, offhand I'd guess it's a non-standard chrome specific thing. Other browsers don't seem to follow this check content thing very well. Here's a small sample size:

Categories