Home/ Questions/Q 510233
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T07:05:33+00:00

I am trying to show a div near the cursor when you click on

  • 0

I am trying to show a div near the cursor when you click on a span with the id as equipment in jquery and css

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d suggest adding a hidden div:

    <div id="message">
This is a message
</div>

    with CSS:

    #message { position: absolute; display: none; }

    and then show it:

    $("#equipment").click(function(evt) {
  $("#message").css({
    top: evt.pageY,
    left: evt.pageX
  }).toggle();
});

    Here’s a complete example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#equipment").click(function(evt) {
    $("#message").css({
      top: evt.pageY + 5,
      left: evt.pageX + 5
    }).show();
  });
});
</script>
<style type="text/css">
html, body, div { margin: 0; padding: 0; border: 0 none; }
#wrapper { margin: 0 auto; width: 600px; }
#equipment { color: green; }
#message { display: none; position: absolute; text-align: center; padding: 10px; width: 120px; background: red; color: white; font-weight: bold; }
</style>
</head>
<body>
<div id="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <span id="equipment">incididunt ut labore et dolore</span> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="message">This is a message</div>
</div>
</body>
</html>
    • 0