Skip to content

Moving Tooltip (HTML-CSS-JS)


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


  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  position: relative;
  display: block;
  width: 400px;
  height: 600px;
  background-image: url("");
  background-size: contain;
  box-shadow: 0px 0px 40px rgba(0,0,0,.50);
  border-radius: 1rem;
  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;

  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;


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

window.onmousemove = function(e){
  var x = e.clientX;
  var y = e.clientY; = (y+10)+"px"; = (x+10)+"px";

Leave a Reply

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

You are commenting using your 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: