jQuery: mouseup + position: absolute + show(). Problems in IE

Question

I am trying to implement a popup that appears when user selects some text in specific <div>. The tooltip is a <div> with display: none and position: absolute CSS properties at the bottom of the page.

In mouseup event handler for selectable div I am doing the following:

$("#popup").css({
    top: e.pageY,
    left: e.pageX
}).show();

Here's a working JS fiddle: http://jsfiddle.net/6r4Lrgmv/

It works fine in Chrome and Firefox but Internet Explorer (I have tested on version 9 and 11) selects text on page till the bottom. What am I doing wrong? Is there a workaround for this issue?

Answer 1

My guessed explanation: when showing the popup, IE thinks your mouse cursor is actually inside the popup. So it selects the text to the end of the page.

I found two possible solutions (tested with IE 11):

• Add +1 to the popup position. This way the popup does not appear directly under the mouse cursor.

  $("#popup").css({
      top: e.pageY + 1,
      left: e.pageX + 1
  }).show();
  

• Use setTimeout. This way the popup is shown after the event is finished (at the end of the current event queue).

  setTimeout(function() {
      $("#popup").css({
          top: e.pageY,
          left: e.pageX
      }).show();
  });