Skip to content

Moving Tooltip (HTML-CSS-JS)

https://codepen.io/guldus/pen/PvrGxz

HTML

<div id="box">
  <div class="image"></div>
  <span id="tooltip">Mountain View</span>
</div>

CSS

body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#box{
  position: relative;
}
.image{
  position: relative;
  display: block;
  width: 400px;
  height: 600px;
  background-image: url("https://images.pexels.com/photos/2324346/pexels-photo-2324346.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=650&w=940");
  background-size: contain;
  box-shadow: 0px 0px 40px rgba(0,0,0,.50);
  border-radius: 1rem;
}
#tooltip{
  position: fixed;
  display: block;
  opacity: 0;
  visibility: hidden;
  background: #262626;
  border-radius: 7.5px;
  color: #ccc;
  text-transform: uppercase;
  font-family: Arial;
  font-size: 16px;
  padding: 10px 15px;
  border: 2px solid #ccc;

}
#tooltip:before{
  content: "";
  width: 20px;
  height: 20px;
  background: #262626;
  position: absolute;
  top: -20px;
  left: -20px;
  border-radius: 50%;
  border: 2px solid #ccc;
}
#box:hover #tooltip{
  opacity: 1;
  visibility: visible;
}

JS

var tooltip = document.getElementById("tooltip");

window.onmousemove = function(e){
  var x = e.clientX;
  var y = e.clientY;
  tooltip.style.top = (y+10)+"px";
  tooltip.style.left = (x+10)+"px";
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: