title: Making a tooltip appear where the mouse is, random behavior?
body: <p>I want a speech bubble-like tooltip to appear where the mouse is after some text has been selected. And it does work, but when you scroll down and try it out near the end of the document (if it's a long one), it doesn't work. It's quite random. Sometimes the tooltip appears close to the beginning of the document, or it might appear too far to the left, or to the right, or only a portion of it might appear, or it might not appear at all.</p>
  
  <p>Here's the fiddle: <a href="http://jsfiddle.net/bdAbZ/" rel="nofollow">http://jsfiddle.net/bdAbZ/</a></p>
  
  <p>Here's the code:</p>
  
  <pre><code>// Generate the speech bubble
  // Temporary placeholder
  var $speechBubble = $('&lt;p class="speech-bubble"&gt;&lt;/p&gt;');
  $speechBubble.appendTo('body');
  
  var mousePosition;
  function updateMousePosition(event) {
      /* Update the global variable mousePosition with the current location of the mouse.
      */
      mousePosition = {left: event.pageX, top: event.pageY};
  }
  $(document).mousemove(updateMousePosition); // mousePosition will always be up-to-date.
  
  function getSelectedText() {
      /* Return the text that the user has selected.
      **
      ** If he hasn't selected anything, return an empty string.
      */
  
      // Different browsers, different ways of getting the selected text.
      if (window.getSelection) {
          return window.getSelection();
      }
      else if (document.getSelection) {
          return document.getSelection();
      }
      else if (document.selection) {
          return document.selection.createRange().text;
      }
      else {
          // This should normally never happen.
          alert('Could not get the selected text.')
          return false;
      }
  }
  
  $('p').mouseup(function() {
      /* Check if the user has selected any text within the p area.
      **
      ** If he has, show the speech bubble menu.
      */
      var selectedText = getSelectedText();
      if (selectedText != '') {
          $speechBubble.text(selectedText);
          $speechBubble.offset(mousePosition);
          $speechBubble.show();
      }
  });
  
  $(document).mouseup(function() {
      /* Check if no text has been selected.
      **
      ** If no text has been selected, hide the speech bubble menu.
      **
      ** Why? The user would probably try to get rid of the speech bubble by clicking somewhere else.
  */
      if (getSelectedText() == '') {
          $speechBubble.hide();
      }
  });
  </code></pre>