title: jQuery tooltip positioning issue in IE
body: <p>I have a problem with IE (what a surprise). I am making an issue reporting function (report bad image...) on my page. I want to show the 'report this image' simple form with a few questions (reason to report...). It should show up after clicking the report image. It works perfectly in FF and also Chrome, but there is a problem in IE. Div should show on mouse click position. First time it shows in the right place, but when I close it and click on another report image without reloading the page (there are more report images on the site) it shows again in the same place where it shows first time (just in IE).
  Here is my code:</p>
  
  <pre><code>$(document).ready(function(){
    $(".proofreporter").click(function(e){
      $('.popup').remove();  //used to remove previously shown elements
  
      $.ajaxSetup ({
      // Disable caching of AJAX responses
        cache: false
      });
  
  
      // setTimeout(function(){$('.popup').remove()},2000);
  
      var name = $(this).attr('id');
      function showData(data) {
          $("body").append(data);
      }
      //x = e.pageX;   first I tried this to get position but same result
      //y = e.pageY;
  
      var pos = $(this).offset(); 
      x=pos.left;
      y=pos.top;
  
      alert(x + 'x' + y);
      $.get('includes/reporter.php?reportimgdiv=' + name + '&amp;x=' + x + '&amp;y=' + y, showData);
    });
  });
  </code></pre>
  
  <p>And here is the code of the <strong>reporter.php</strong></p>
  
  <pre><code>if(isset($_GET['reportimgdiv']))
  
  
  {       //report IMAGE
    ?&gt;
    &lt;style type="text/css"&gt;                                                                                                                            
    .popup {          //SOLVED; change to this: #&lt;?echo report$_GET['reportimgdiv']?&gt;
      position: absolute;
      left: &lt;?echo $_GET['x'];?&gt;;
      top: &lt;?echo $_GET['y'];?&gt;;
      z-index: 100;
      width: 280px; 
    }
    .subtle {
      margin: 0px;
      padding: 5px;
      border: 2px solid gray;
      font-size: small;
      text-align: left;
      background-color: #EEE;
      color: #444;
    }
    &lt;/style&gt;
    &lt;?
    $imgid=$_GET['reportimgdiv'];
    ?&gt;
    &lt;div id="reportForm001" class="popup" style="margin-top: 0em; "&gt;   //solved: change id="report&lt;?echo $imgid?&gt;"
    &lt;!--
    &lt;form name="form1" method="post" target="reportframe" action="update/pagereportframe.php" class="subtle" style="position: relative; left: 1em; top: 2px;"&gt;
    --&gt;
    &lt;form name="form1" method="post" target="reportframe" action="includes/reporter.php" class="subtle" style="position: relative; left: 1em; top: 2px; background-color: white" &gt;    
      &lt;input name="id" type="hidden" value="&lt;?echo $imgid; ?&gt;"&gt;
      &lt;div style="position: absolute; right: 1em; font-size: x-small"&gt;&lt;a href="#" onClick="jQuery('.popup').remove();"&gt;CLOSE [X]&lt;/a&gt;&lt;/div&gt;
      &lt;h3&gt;What is wrong with this image? &lt;?echo $_GET['x'];?&gt; X &lt;?echo $_GET['y'];?&gt; &lt;/h3&gt; 
      &lt;input type="radio" name="reason" value="1"&gt; BLAH BLAH/b&gt;. &lt;br&gt;  
      &lt;input type="radio" name="reason" value="2"&gt; BLAH BLAH/b&gt;. &lt;br&gt;  
      &lt;br&gt;Comment (optional):&lt;br&gt;
      &lt;textarea name="comment" rows="3" style="width: 100%"&gt;&lt;/textarea&gt;&lt;br&gt;
      &lt;input value="Submit" type="submit"&gt;
    &lt;/form&gt;
    &lt;/div&gt;
   &lt;?
    }
  </code></pre>