HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clientX — follow</title>
  <style>
    #tip {
      position: fixed;
      pointer-events: none;
      padding: 0.25rem 0.5rem;
      background: #222;
      color: #fff;
      font: 12px sans-serif;
      border-radius: 4px;
      transform: translate(0, 0);
    }
  </style>
</head>
<body>
  <p>Move the mouse — the tip follows using clientX/clientY.</p>
  <div id="tip">0, 0</div>
  <script>
    var tip = document.querySelector("#tip");
    document.addEventListener("mousemove", function (e) {
      tip.style.left = e.clientX + 12 + "px";
      tip.style.top = e.clientY + 12 + "px";
      tip.textContent = e.clientX + ", " + e.clientY;
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

MouseEvent.clientX — follow pointer (Try It)