title: Using mouse/cursor coordinates to position popup
body: <p>I'm using this code to show a popup, for a mini-profile in phpBB, triggered by a mouseover event</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style type="text/css"&gt;
  .popUpProfile
  {
  position: absolute;
  z-index: 3;
           left: 100px;
          top: 200px;
  font-size: 14px;
  background-color: #DCEBFE;
  margin: 0 10px;
  padding: 5px;
  width: 450px;
  border: solid 2px red;
  border-radius: 8px;
  resize:both;
  overflow:auto;
   
  visibility: hidden;
  }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm looking to use the mouse coordinates to display the popup with the top at the same level as the hovered text, ie the mouse y position, and the left of it around 200px to the right. Using this code, which I have just found</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  window.onload = init;
  function init() {
   if (window.Event) {
   document.captureEvents(Event.MOUSEMOVE);
   }
   document.onmousemove = getCursorXY;
  }
  
  function getCursorXY(e) {
   document.getElementById('cursorX').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
   document.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've now got x and y variables, called cursorX and cursorY, but struggling to get these into the first code, and thus pass the coordinates to the popup. I've tried </p>
  
  <p>left: cursorX + "px" </p>
  
  <p>which looks like it should work from instances shown on this site, but it doesn't! </p>
  
  <p>Can anyone advise on how to pass the variables, and also if the code used to obtain them is as efficient as it could be? </p>
  
  <p>Any help would be appreciated (and apologies if this is old ground, but I have searched to no avail!)</p>
  
  <p>Cheers!</p>