We Keep Coding

How to have a tooltip-like element appear after a few seconds of hovering above a button

I am trying to make it such that after about 3 seconds of a user hovering above a button, a tooltip-like element would appear to it's right.
For instance, a user to hover over a button for a few seconds and the description would fade in to the button's right, then would fade out when the user takes the mouse off the button.
I have tried :hover in CSS and the onmouseover attribute, but I really don't know what to do.
I am sorry if there is too little information or examples, but I would really like a solution.

What about a CSS only approach ? The idea is to fade in some text after some delay and yes CSS can do it.
button {
display: inline-block;
position: relative;
padding: 10px 15px;
margin: 15px;
border: 0;
border-radius: 6px;
background-color: #cecece;
cursor: pointer;
transition: all .4s 0s ease;
}
button,
button:before,
button:after {
box-sizing: border-box;
}
button:hover {
background-color: #bababa;
}
button:hover:before,
button:hover:after {
visibility: visible;
opacity: 1;
transition: all 0.4s 3s ease; /** that's the magic **/
}
button:before,
button:after {
content: "";
visibility: hidden;
opacity: 0;
position: absolute;
top: 50%;
transform: translate3d(0, -50%, 0);
transition: all 0.4s 0s ease;
}
button:before {
width: 0;
height: 0;
right: -8px;
border: 8px solid transparent;
border-right-color: #181818;
}
button:after {
content: attr(aria-label);
width: 100%;
left: calc(100% + 8px);
padding: 6px;
background-color: #181818;
color: #fff;
border-radius: 4px;
}
<!-- the content of aria-label attribute is the text that will be shown -->
<button type="button" aria-label="lorem ipsum sit dolor amet.">Hover Over Me (3s)</button>
Anyway, there are many CSS only tooltip libraries out there that i'd suggest checking them.
Feel free to ask for clarifications.

const tooltip = document.querySelector(".tooltip");
const hoverMe = document.querySelector(".hover-me");
let timeout;
const showTooltip = () => {
tooltip.style.display = "block";
timeout = undefined;
}
const hideTooltip = () => {
tooltip.style.display = "none";
if (timeout) {
clearTimeout(timeout);
timeout = undefined;
}
}
hoverMe.addEventListener("mouseover", () => {
timeout = setTimeout(showTooltip, 3000);
});
hoverMe.addEventListener("click", hideTooltip);
hoverMe.addEventListener("mouseout", hideTooltip)
<div class="hover-me"> Hover me</div>
<div class="tooltip" style="display: none">I'm a tooltip</div>
You can set a timeout and clear it if you don't want it to finish executing.

Enlarge custom cursor pointer on hovering links using JS

I've been working on a custom cursor that I want to grow when it hovers over objects with a certain property. I started with css, found that unreliable, and now am trying to use js- pure js that is, not jquery.
The cursor movement seems to work well enough, and the bit for transforming the outer circle also seems to throw up no errors at all, which leaves me confused as to whats going on here. Any help would be appreciated.
/*kinda laggy cursor control js */
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
})
const cursor2 = document.querySelector('.cursor2');
document.addEventListener('mousemove', e => {
cursor2.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
})
const all = document.querySelectorAll(".use");
document.addEventListener('mouseOver', function() {
cursor.style.transform = scale(2)
})
.cursor {
width: 25px;
height: 25px;
position: absolute;
border: 2px solid rgb(41, 41, 41);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: 50ms;
transition-timing-function: ;
mix-blend-mode: difference;
z-index: 200;
pointer-events: none;
}
.cursor2 {
z-index: 200;
transition: 10ms;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: black;
pointer-events: none;
mix-blend-mode: difference;
position: absolute;
transition-timing-function: ;
}
.style {
font-family: 'Helvetica';
font-size: calc(2em + 8vw);
font-weight: 700;
-webkit-text-fill-color: rgba(0, 0, 0, 0);
-webkit-text-stroke: 1px;
-webkit-text-stroke-color: rgb(0, 0, 0);
letter-spacing: -.6vw;
line-height: calc(.7em + 1vw);
animation: marquee 30s linear infinite;
display: inline-block;
user-select: none;
}
a {
text-decoration: none;
cursor: none;
}
a:hover+.cursor {
transform: scale(1.5);
!important transition-duration: 500ms;
}
<div id="style use">hello</div>
<!-- outer cursor div-->
<div class="cursor">
</div>
<!-- inner cursor div-->
<div class="cursor2">
</div>

element.style.transform needs to have a string value (in your case, it should have been 'scale(2)' [a string]). I have added a class enlarged to add the increased width and height styles to your cursor upon mouseenter and mouseout of every link in your document.
Here's a working example.
const cursor = document.querySelector('.cursor');
const cursor2 = document.querySelector('.cursor2');
const links = document.querySelectorAll('a')
links.forEach(link => {
link.addEventListener('mouseenter', e => {
cursor.classList.add('enlarged')
})
link.addEventListener('mouseout', e => {
cursor.classList.remove('enlarged')
})
})
document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
cursor2.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
})
html,
body {
width: 100%;
height: 100%;
margin: 0;
cursor: none;
}
.cursor {
width: 25px;
height: 25px;
position: absolute;
border: 2px solid rgb(41, 41, 41);
border-radius: 50%;
transform: translate(-50%, -50%);
transition:
top 50ms linear,
left 50ms linear,
width 500ms ease,
height 500ms ease;
z-index: 1;
pointer-events: none;
}
.cursor.enlarged {
width: 50px;
height: 50px;
}
.cursor2 {
transition: 10ms;
z-index: 1;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: black;
pointer-events: none;
position: absolute;
transform: translate(-50%, -50%);
}
a {
text-decoration: none;
cursor: none;
font-family: Helvetica;
font-size: 4em;
padding: 15px;
}
<div id="style use">Hello</div>
<!-- outer cursor div-->
<div class="cursor">
</div>
<!-- inner cursor div-->
<div class="cursor2">
</div>

Modified Cursor 'lags'

I am currently building a modified cursor for my portfolio-website. Unfortunately, my cursor lags when I try to scroll and move the cursor. However, it works when I remove all the other elements from HTML, CSS, and JavaScript and ONLY have the code concerning my cursor (https://codepen.io/djaisdjasidj/pen/RwNvePZ).
// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
e.stopPropagation();
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
});
// Cursor HOVER modified - When hovering an element
var cursor = document.getElementById('cursor');
var clickableCursor = document.getElementsByClassName('clickableCursor');
for (var i = 0; i < clickableCursor.length; i++) {
clickableCursor[i].addEventListener('mouseover', () => {
cursor.style.height = "80px";
cursor.style.width = "80px";
cursor.style.animation = "cursorAnimation 5s linear infinite";
cursor.style.background = "white";
});
clickableCursor[i].addEventListener('mouseout', () => {
cursor.style.height = "40px";
cursor.style.width = "40px";
cursor.style.animation = "none";
cursor.style.border = "2px solid white";
cursor.style.background = "none";
});
}
body {
cursor: none;
}
.container {
height: 3000px;
width: 100%;
position: relative;
background: orange;
}
#cursor {
backface-visibility: hidden;
z-index: 1000000000;
position: fixed;
width: 40px;
height: 40px;
border: 2px solid white;
transition: .1s;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
transition-duration: 100ms;
transition-timing-function: ease-out;
}
#cursor::before {
content: '';
position: absolute;
height: 7px;
width: 7px;
border-radius: 100%;
background-color: white;
}
.clickableCursor {
font-size: 50px;
color: white;
position: fixed;
background: black;
padding: 50px
}
.one {
top: 50px;
left: 50px;
}
.two {
top: 50px;
right: 50px;
}
<div class="container">
<div id="cursor"></div>
<p class="clickableCursor one"> Hello </p>
</div>
CSS for my Cursor:
#cursor {
backface-visibility: hidden;
z-index: 1000000000;
position: fixed;
width: 40px;
height: 40px;
border: 2px solid white;
transition: .1s;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
transition-duration: 100ms;
transition-timing-function: ease-out;
}
My question is - how do I prevent this cursor 'lag' when I have a bigger HTML, CSS, and JavaScript file?

I had the same problem and i solved it with this code :
(hope it can help you or other developers)
$(window).ready(function(){
let mouseX = 0;
let mouseY = 0;
let xp = 0;
let yp = 0;
$(document).mousemove(function(e){
$(".custom__cursor__inner").css({
transform: 'translate(' + (e.clientX - 3.25) + 'px, ' + (e.clientY - 3.25) + 'px)'
});
mouseX = e.clientX - 10;
mouseY = e.clientY - 10;
});
setInterval(function(){
xp += ((mouseX - xp)/6);
yp += ((mouseY - yp)/6);
$(".custom__cursor__outer").css({transform: 'translateX('+ (xp - 15) +'px) translateY('+ (yp - 15) +'px)'} );
}, 10);
})
*{
cursor: none;
}
.custom__cursor__inner{
height: 7.5px;
width: 7.5px;
position: fixed;
transform: translate(0px, 0px);
background-color: #F7D883;
border-radius: 50%;
transition: height .3s cubic-bezier(0.46,0.03,0.52,0.96), width .3s cubic-bezier(0.46,0.03,0.52,0.96);
z-index: 5000;
pointer-events: none;
}
.custom__cursor__outer{
height: 50px;
width: 50px;
border-radius: 50%;
border: 1px solid #0F1928;
background-color: transparent;
position: fixed;
z-index: 5000;
transform: translate(0px, 0px);
pointer-events: none;
opacity: 0.4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom__cursor__outer">
</div>
<div class="custom__cursor__inner">
</div>

The lag happens because you are using a transition to move the cursor to the current mouse location, explicitly stating that it should be lagging behind 100ms.
You should only apply the CSS transition on the elements and attributes that you want to animate, but not the location of the cursor.
Use the transition-property rule to define which attributes should be "transitioned" or use the transition shorthand syntax to explicitly specify the attribute names like #Tyler Roper does in his comment.

Image gallery hover overlay height problem

I'm trying to recreate a google image search layout with an image hover overlay effect.
The problem I'm facing is setting the correct height of the overlay, I managed to set the correct width via jQuery but I can't seem to get the height right. I'd like the overlay to fill the entire image and not only the top.
An example of the image hover overlay effect can be found here: Image hover overlay effect
Here is my jsFiddle, hover on top of the images to see the effect.
function picRow(selector) {
masterArray = [];
// create each lineArray and push it to masterArray
$(selector).each(function () {
// get "selector" css px value for margin-bottom
// - parse out a floating point number
// - and divide by the outer width to get a decimal percentage
margin = (parseFloat($(this).css("margin-bottom"), 10)) / ($(this).outerWidth());
marginRight = margin * 100 + "%";
// subtract subtract the total child margin from the total width to find the usable width
usableWidth = (1 - ((($(this).find("img").length) - 1) * margin));
// for each child img of "selector" - add a width/height as value in the ratios array
ratios = [];
$(this).find("img").each(function () {
ratios.push(($(this).attr('width')) / ($(this).attr('height')));
});
// sum all the ratios for later divison
ratioSum = 0;
$.each(ratios, function () {
ratioSum += parseFloat(this) || 0;
});
lineArray = [];
$.each(ratios, function (i) {
obj = {
// divide each item in the ratios array by the total array
// as set that as the css width in percentage
width: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
height: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
// set the margin-right equal to the parent margin-bottom
marginRight: marginRight
};
lineArray.push(obj);
});
lineArray[lineArray.length - 1].marginRight = "0%";
// alert(lineArray[lineArray.length - 1].marginRight);
masterArray.push(lineArray);
});
$(selector).each(function (i) {
$(this).find("img").each(function (x) {
$(this).css({
"width": masterArray[i][x].width,
"margin-right": masterArray[i][x].marginRight
});
});
$(this).find(".text").each(function (x) {
$(this).css({
"width": masterArray[i][x].width,
/*"height": masterArray[i][x].height,*/
"margin-right": masterArray[i][x].marginRight
});
});
});
}
$(document).ready(function () {
picRow(".image-row");
});
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
padding: 0;
/*width:100px;*/
display:block;
}
.text {
position: absolute;
top: 0;
color:#9CBDBE;
font-weight:bold;
font-size:30pt;
background-color:#fff;
width: 100px;
/*height: 50px;*/
text-align: center;
padding: 1%;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:0.8;
}
img {
z-index:1;
}
.image-row {
width: 100%;
margin: 1% 0;
}
.image-row img {
width: 100%;
height: auto;
display: block;
font-size: 0;
float: left;
}
.image-row::after {
content: "";
display: table;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-row">
<a href="#1" class="wrapper">
<span class="text">Hover text</span>
<img src="https://source.unsplash.com/random/768x960" width="768" height="960"/>
</a>
<a href="#2" class="wrapper">
<span class="text">Hover text</span>
<img src="https://source.unsplash.com/random/1280x851" width="1280" height="851"/>
</a>
</div>

The simplest way to achieve this with CSS(refer other's answers) but if you want to do with Jquery You can do something like this. get the height of each image and apply it to their corresponding .text class.
$(selector).each(function (i) {
$(this).find("img").each(function (x) {
$(this).css({
"width": masterArray[i][x].width,
"margin-right": masterArray[i][x].marginRight
});
});
$(this).find(".text").each(function (x) {
var imgHeight = $(this).parent().find("img").height();
$(this).css({
"width": masterArray[i][x].width,
"height": imgHeight,
"margin-right": masterArray[i][x].marginRight
});
});
});
Here is the working fiddle

You can try this CSS. I give the a tag .wrapper a width and height so that it can contain the span tag. Then the span stag `.text', I displayed block it then 100% the width and height so that it will occupy the space of the a tag. And lastly, I positioned absolute the image.
Please check my css code below:
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
padding: 0;
display:block;
height: 200px;
width: 500px;
overflow: hidden;
}
.text {
position: absolute;
top: 0;
color:#9CBDBE;
font-weight:bold;
font-size:30pt;
background-color:#fff;
/* width: 100px; */
/*height: 50px;*/
text-align: center;
/* padding: 1%; */
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
height: 100%;
width:100%;
left: 0;
border: 1px solid;
}
.text:hover {
opacity:0.8;
}
img {
z-index:1;
position: absolute;
top: 0;
left: 0;
}
.image-row {
width: 100%;
margin: 1% 0;
}
.image-row img {
width: 100%;
height: auto;
display: block;
font-size: 0;
float: left;
}
.image-row::after {
content: "";
display: table;
clear: both;
}

I'm pretty sure this effect can be achieved in just CSS.
Here's my solution:
html, body {
margin: 0;
width: 100%;
height: 100%;
}
* {
box-sizing: border-box;
}
.imgWrapper { position: absolute; }
.imgWrapper::before {
transition: all ease-in-out .2s;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.imgWrapper:hover::before {
background: red;
}
.imgWrapper:hover .middle {
opacity: 1;
}
.middle {
transition: all ease-in-out .2s;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: .5em;
}
.middle span {
white-space: nowrap;
}
<div class="imgRow">
<div class="imgWrapper">
<img src="https://via.placeholder.com/300x300" />
<div class="middle">
<span>Hello I am some text!</span>
</div>
</div>
</div>

add this.. i just changed text position values.
css
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
padding: 0;
width:auto;
display:inline-block;
}
.text {
position: absolute;
top: 0;
left:0;
bottom:0;
right:0;
color:#9CBDBE;
font-weight:bold;
font-size:30pt;
background-color:#fff;
width: 100px;
/*height: 50px;*/
text-align: center;
padding: 1%;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display:flex;
justify-content:center;
align-items:center;
}
.text:hover {
opacity:0.8;
}
img {
z-index:1;
}
.image-row {
width: 100%;
margin: 1% 0;
}
.image-row img {
width: 100%;
height: auto;
display: block;
font-size: 0;
float: left;
}
.image-row::after {
content: "";
display: table;
clear: both;
}

Mouse hover moving image position

I am trying to move an image when my mouse is over it.
Here's an exemple. When moving hover pictures, the text is smoothly following your mouse and this is what I'm looking for.
Do you have any idea ?
The problem with what I tried is that the image keeps moving when I get out of the violet box. (I would prefer to avoid having to create a box and recognize when I am over the image).
$("#containerScaled").on('mousemove', '.box', function (e) {
$("#followC").css("top", e.clientY)
.css("left", e.clientX);
});
<style>
#containerScaled, #followC {
transition: all 0.9s ease-out;
transform-origin: center;
transform: scale(1, 1);
}
.box {
height:50px;
width:50px;
left: 500px;
top: 50px;
background-color: blueviolet;
position: absolute;
}
.mouseFollow {
position: fixed;
width:70px;
height:20px;
font-size:12px;
pointer-events:none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="containerScaled" class="container">
<div class="box">test</div>
</div>
<div id="followC" class="mouseFollow"><img src=" image "/></div>

I think you should begin with altering your position based on where your mose is positioned inside your rectangel like so:
if (e.clientX > width/2){
addX = 20;
}
if(e.clientX < width/2){
addX = -20;
}
if(e.clientY > height/2){
addY = 20;
}
if(e.clientY < height/2){
addY = -20;
}
This is the first step, that actually makes something "follow" your mouse.
I think you could do some optimization, so that the animation is more crispy, but basically thats the way to go.
I also added
$("#containerScaled").on('mouseleave', '.box', function(e) {
$("#followC").css("top", "50%").css("left", "50%");
});
so that your element will get back to its original position once you leave the :hover area
Because of this I also made you hover area transparent, any lay over the moving element, so that when you hover over the moving element, you wont leave the hover area, and trigger mouseleave
.box{
background-color: transparent;
}
.boxcolored{
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: green;
}
$("#containerScaled").on('mousemove', '.box', function(e) {
var left = parseFloat($(".box").css("left"));
var right = parseFloat($(".box").css("top"));
var width = parseFloat($(".box").css("widht"));
var height = parseFloat($(".box").css("height"));
var addX = 0;
var addY = 0;
if (e.clientX > width/2){
addX = 20;
}
if(e.clientX < width/2){
addX = -20;
}
if(e.clientY > height/2){
addY = 20;
}
if(e.clientY < height/2){
addY = -20;
}
$("#followC").css("top", e.clientY + addY)
.css("left", e.clientX + addX);
});
$("#containerScaled").on('mouseleave', '.box', function(e) {
$("#followC").css("top", "50%").css("left", "50%");
});
#containerScaled {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: red;
}
#followC {
transition: all 0.9s ease-out;
transform-origin: center;
}
.box {
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: transparent;
}
.boxcolored{
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: green;
}
.mouseFollow {
position: relative;
height: 20px;
width: 75px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="containerScaled" class="container">
<div class="boxcolored"></div>
<div id="followC" class="mouseFollow">HALLO</div>
<div class="box">mouse me</div>
</div>

The box outlined in a red dashed line is the hover area. The yellow box is the visual area which is the approximation of the limits to which the letters can move within.
There is a lag and an offset. The lag is due to transition: 0.9s and the offset is left and top. The lag can be decreased but at the cost of the smooth movement, There are four letters at varying transition times for comparison. Notice that they all stop at the same position (when the mouse is no longer moving within the dashed box), it just that the slower the transition the more movement occurs after the mouse has left the dashed box.
The offset is tougher since there is only two positions that will work: x: right or left and y: top or bottom. If keeping the letters within a box is a concern, then keep the hover area border and background to none and show the offset (visual area) instead.
Note: Do not review this demo in compact mode, view it in full page mode (normal dimensions)
$(".target").on('mousemove', function(e) {
$(".text").css({
"top": e.clientY,
"left": e.clientX
});
});
main {
position:relative;
font: 400 16px/1.2 Arial;
}
.zone {
position: absolute;
z-index: 1;
height: 120px;
width: 110px;
margin: 90px 0 0 90px;
background: gold;
color:white;
text-align:right;
}
.target {
position: absolute;
z-index: 2;
height: 100px;
width: 100px;
margin: 75px;
outline: 3px dashed red;
color:red
}
.text {
position: absolute;
z-index: 3;
top: 90px;
left: 90px;
font-size: 32px;
color:black
}
.A {
transition: all 0.9s ease-out;
}
.B {
transition: all 0.6s ease-out;
}
.C {
transition: all 0.3s ease-out;
}
<main>
<section class="target">Hover Area</section>
<aside class="text A">A</aside>
<aside class="text B">B</aside>
<aside class="text C">C</aside>
<aside class="text D">D</aside>
<section class='zone'><b>Visual Area</b></section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>