I want to implement a functionality in my React app where you hover over a <span> element and then an InfoBox appears over the <span> element.
It should look like in Visual Studio code when you hover your cursor over a variable for example.
The box should behave as in the following sketch I drew (basically it's the same behavior as in VSCode): The InfoBox is the box that contains This text. The <span> contains the hello
Unfortunately I'm not an expert in CSS and I don't even know if this is possible with CSS only or if you have to use javascript as well.
I was looking into similar things so figured I might share what I ended up with.
If you go to Help > Toggle Developer Tools it opens up the Dev Tools just like in Chrome on the side. Seems like most Electron based apps have this (although Ctrl+Shift+I—I'm on Windows—didn't work for me on VS Code somehow. Needed to open it via mouse through the aforementioned method).
With the Dev Tools you can then view what HTML, JavaScript, and CSS is used to make the displayed UI possible. I opened up the console tab at the bottom so that I can type on it while I use my mouse to hover on things, then I entered debugger command in the console to pause the JS execution or something (don't quote me on this). Point is it pauses the state of everything so you can then keep the tooltip that is created with JavaScript in display.
Seems like it's just standard Tooltip positioning with display: block and position: fixed, as well as max-width, top and left set by calculated JavaScript. There's also a z-index rule set by a class selector but that's on the stylesheet.
element.style {
position: fixed;
display: block;
visibility: inherit;
max-width: 1152px;
top: 85px;
left: 147px;
}
Personally I would use position: absolute instead of fixed. I would guess they used fixed in Visual Studio Code instead because of the way they calculated the position inside each "split view" (the windows), because the overridden CSS stylesheet did use position: absolute as seen here.
.monaco-hover {
cursor: default;
position: absolute;
overflow: hidden;
z-index: 50;
user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
box-sizing: initial;
animation: fadein .1s linear;
line-height: 1.5em;
}
I recognize this doesn't fully answer the question (nothing on how to get or set the dimensions) but I know where I need to go myself from here on, and for those answers I think you can go looking for answers elsewhere depending on if you're writing vanilla JS, or using some framework (in which case there might be an easier way to get, calculate, and set those things).
Is this what you are looking for?
Where you hover over some text and text below it appears?
.thisText > .hello {
display: none;
}
.thisText:hover > .hello {
display: block;
}
<span class="thisText">
This Text
<span class="hello">
Hello
</span>
</span>
This might help:
.thisText{
position:relative;
top: 20px;
}
.thisText > .hello{
display: none;
}
.thisText:hover> .hello {
display: block;
position:absolute;
top:-20px;
}
<span class="thisText">
This Text
<span class="hello">
Hello
</span>
</span>
Related
Good morning. I am currently working on a final project for my Unix class and it trying to implement some of the stuff learnt through building a web game. One feature that I want to incorporate is the ability to add text over a div as shown in the picture. How would I go about that?
Try including some of your own source code next time, just so we get an idea of what you're having issues with.
But to put text over, try using position: relative, inside a div with a background image of what you want.
Eg.
.parent {
background-image:url("https://picsum.photos/200/300");
width: 800px;
height: 800px;
}
.text {
position: relative;
top: 20px;
left: 40px; /*edit top, left, right, and bottom to change position*/
font-weight: bold;
}
<body>
<div class="parent">
<p class="text">TEXT!</p>
</div>
</body>
If you can't use a background image, try using absolute positioning.
Here's a great tutorial for that: https://www.youtube.com/watch?v=P6UgYq3J3Qs
I'm trying to emulate position: fixed; using javascript, the reason being that the element has to be inside a scrollable div (overflow-scroll-y), and position: fixed; only works relative to the window scroll, not an elements scroll, though normally in a case like this I could fix it by using position: absolute; and everything would just work, but the scollable div / container element needs to have perspective: 1px; which brakes the position: absolute; adjustment, so back to just js emulation.
Now it works, with javascript, but all too often the element in question lags a bit behind the scroll, creating a kind of "jumpy" feeling (it's especially bad on Firefox), that is say it's fixed at the top of the element, if the user scrolls it's suppose to be exactly at the top always, but in reality it sometimes goes a bit (or allot) too high or low, depending on the scrolling direction, and then snaps in place again, this snapping or jumpy effect is undesirable, and is not present in cases where you can fix the element using either position: fixed; or position: absolute;.
I've made a jsFiddle Example, if you don't notice the undesirable effect in your browser you can try uncommenting the increaseLag function, on my computer the lag is clearly visible on Firefox but not as noticeable on Chrome unless I enable the increaseLag function (I'm running Ubuntu).
How could one tackle this? Is there perhaps a pure css solution I'm missing or an alternative js route?
My current buggy solution uses a scroll event on the container element which updates the top css property of the "fixed" element relative to the updated scroll position.
$("#container_element").scroll(function() {
//increaseLag(this);
var scrollTop = $(this).scrollTop();
$(".fixed_emulation").css("top", scrollTop+"px");
});
#container_element {
width: 100%;
height: 100%;
overflow-y: scroll;
perspective: 1px;
}
.fixed_emulation {
background-color: #000;
color: #FFF;
position: absolute;
top: 0;
width: 100%;
}
<div id="container_element">
<div class="fixed_emulation"> :) </div>
<p>Text text text. Text text. Text.</p>
<p>Text text text. Text text. Text.</p>
<p>Text text text. Text text. Text.</p>
...
</div>
I have just encountered the strangest problem I've ever come across in my humble web developing freelance career. I'm building a web application for a job application site where applicants use their webcams to answer 3 short questions. For this I use a jQuery plugin called ScriptCam which uses Flash to activate the user's webcam. I had this all working just fine but now I have the following problem.
I use jQuery .show() and .hide() to show and hide buttons. One button, a replay button, doesn't show up when calling $("#replay").show(); but DOES show when I right click anywhere in the browser after calling this command and hit "Inspect Element"! I've been searching for what could cause this problem but haven't found anything... What could cause this behavior?
This is how I have defined the button:
<div onclick='replay();' id='replay' class="replay">Replay</div>
This is the button's CSS:
.replay{
float: left;
top: 150px;
left: 60px;
z-index: 100;
-webkit-box-shadow: 0 12px 36px -16px rgba(0,0,0,0.5);
background:url('../img/button-grey.png') no-repeat 100% 100%;
background-position: center center;
color: white;
width: 140px;
text-align: center;
padding: 10px;
cursor: pointer;
font-family: Archive;
display: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
Edit: This is CSS of the button's parent div:
.box{
margin-left: 100px;
height: 337px;
width: 300px;
float: left;
text-align: center;
}
I haven't used any delays anywhere and the button really appears only right after I click inspect element somewhere in the browser. I also cannot reproduce this problem anywhere else. Anyone got an idea what could cause this? Any help would be much appreciated, thanks in advance!
Update: It appears that only Safari on Mac is having issues.
Update 2: When moving the button out of it's parent div to directly below the body tag it works as it should! So it's probably a css conflict of the parent div?
Edit: You can see the problem live here, just hit the button "Volgende vraag" en wait for the small video to finish. After that the replay button should appear right above the video.
I've found the solution! The problem is caused by an earlier container div which has the CSS display:none. Although I change that with jQuery's .show() before the problem occurs and it's contents are visible, removing display:none in my CSS makes it work! Thanks for all the great help and suggestions!
For me I had to change the visibility of an element that I found hidden above the image in my stylesheet to fix the issue. I found it by using inspect-element.
Then after changing it the image moved up obviously so I had to change the margins to change it back to its original position.
I'm using foundation and I've not seen anything in the documentation regarding the file input, only general input elements. But styling the file input is not so easy. And more if you want to keep it coherent with the design of the whole form in all the browsers.
I've seen some solutions like Styling an input type="file" button or https://github.com/filamentgroup/jQuery-Custom-File-Input, but I wanted to know if there's something specific in foundation, as the usual wrapping div styles don't work at all (div.large-3.columns etc.).
How do you do it?
Do you need only button? Or field with file's address too? If only button the simpliest solution is demo
<a class="wrapper">
button name
<input type="file"/>
</a>
.wrapper {
width: 100px;
height: 30px;
overflow: hidden;
position: relative;
}
input {
position: absolute;
right: 0;
top: 0;
bottom: 0;
font-size: 50px; /* some huge for cursor pointer hack */
}
also you can use pseudo-classes for some browsers see article
I just applied the .button class to the input tag.
It looks good enough for me.
For any styling more sophisticated than Foundation's default (e.g. changing the look of the browse button) you will need to edit their implementation of the label element technique.
It's fully semantic, accessible and requires no JavaScipt. Basically, you hide the input, ensure the id is set on both the label and file field, then style the label accordingly. Here's a great article that explains the technique along with a CodePen (https://codepen.io/bmarshall511/pen/bjyEgq) that shows how it's done: https://benmarshall.me/styling-file-inputs/
[type="file"] + label {
background: #f15d22;
border-radius: 5px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
I currently have a div appearing on hover, but it just pops up rather than sliding in:
#home-heroImage{
padding: 0px;
margin: 0px auto;
width:980px;
height: 525px;
position: relative;
z-index: 1;
background-color: #fcba2e;
}
#home-hero-pop{
background-color: #ffffff;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font: 16px Helvetica,Arial,sans-serif;
font-weight: bold;
color: #6d6e70;
text-align: left;
padding: 10px;
position: absolute;
right: 0px;
top: 0px;
height: 505px;
width: 460px;
z-index: 2;
}
Fiddle.
After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don't know much about JavaScript or jQuery so the modifications I've tried to make to this code are not producing the desired effect:
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 200
}, 200)
})
});
Fiddle.
I've tried reading several JavaScript articles online but they're over my head right now.
Based on the example you give, here's it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/
EDIT 2017
Too much jQuery
You're right, here's a CSS alternative
.left-right {
overflow:hidden;
height:200px;
width:200px;
position:relative;
background-color:#333;
}
.slider {
width:200px;
height:200px;
position:absolute;
top:0;
right:-200px;
background-color:#000;
color:#fff;
transition:0.4s ease;
}
.left-right:hover .slider {
right:0;
}
<div class="left-right">
<div class="slider">Welcome !</div>
</div>
My answer uses no JavaScript. CSS can handle this automatically for you.
Here's a link to a fork of your code as a working example:
http://jsfiddle.net/g105b/Adk8r/11/
There is only a little change from your example. Rather than hiding the element and showing it with display property, the element is placed off-screen using right: -480px (where 480 is the cumulative width), and moving it to right: 0 when the mouse hovers.
Using CSS transitions provides the animation, and support is very good now: http://www.caniuse.com/#search=transition
This technique allows all browsers back to IE6 view and use your website, but users with older browsers will not have an enhanced experience. Unless you require the animation - as in, it is a feature for it to animate - I would suggest using CSS transitions to futureproof your website and use web standards.
Users of deprecated browsers deserve a deprecated experience.
Fiddle: http://jsfiddle.net/BramVanroy/Adk8r/10/
As said: please learn to write logical and correct HTML. Your markup is invalid and unlogical. You should perfect your HTML and CSS and then study JavaScript and jQuery rather than trying to get a hang of everything at once. This code is a pain to the eye.
Here's what's wrong:
Try to avoid large chunks of inline style and JavaScript.
You use a span where one would use a heading-tag (<h1>Welcome</h1>) and style it via CSS.
You use line breaks <br /> where one would use paragraphs:
<p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>
There's no structure in your code. This is not necessary to create a working website, but it's good practice to give child elements an indent of two or four spaces. This way, it's very clear for yourself which element is which child or parent. The same is true for your CSS rules: it's better to put your selector first and then the rules (indented) like so:
h1 {
font-weight: bold;
font-size: 160%;
}
You have a closing </a> tag but there's no opening <a>.
There is a very simple way to do it using css3.
instead of going through the hassle of javascript
try something like in the CSS:
div.move {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}
/*on mouse hover*/
div.move:hover {
/*General*/
transform:translate(200px,100px);
/*Firefox*/
-moz-transform:translate(200px,200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px,100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px,100px);
/*Opera*/
-o-transform:translate(200px,100px);
}
in the HTML:
<div class="move">Anything is here moves!</div>
Also the translate works on an x/y axis.
This is very simple. All you need is HTML, CSS and jQuery.
Make a solid div.
Make the parent div to hide overflow (overflow:hidden) in CSS.
Assign a margin-left of 100% (or some length) that the required div hides away because of margin.
Do a jquery animate() function to bring down margin-left to 0 or 0%.
You can also set the speed of animation by giving time in ms (milliseconds) or some expression like slow or fast