HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pageX HUD demo</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    #chart { height: 200px; background: linear-gradient(90deg, #dbeafe, #e0e7ff); border-radius: 12px; border: 2px solid #94a3b8; position: relative; }
    #hud { position: absolute; display: none; padding: 4px 8px; background: #1e293b; color: #fff; font-size: 12px; border-radius: 4px; pointer-events: none; z-index: 10; }
  </style>
</head>
<body>
  <div id="chart"><div id="hud"></div></div>
  <p style="font-size:13px;color:#64748b;margin-top:8px;">Hover the chart area.</p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#chart").on("mousemove", function (event) {
      var offset = $(this).offset();
      $("#hud")
        .text("pageX: " + Math.round(event.pageX))
        .css({ left: event.pageX - offset.left + 12, top: event.pageY - offset.top + 12 })
        .show();
    }).on("mouseleave", function () {
      $("#hud").hide();
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery event.pageX — HUD readout (Try It)