Weird mouse event location Jquery
<p>Jquery:</p>

<pre><code>&lt;script&gt;
jQuery(document).ready(function() {
    $("#membership_options li").bind("mousemove", function(event) {
        $(this).find(".compare_tooltip").css({
            top: event.pageY + 5 + "px",
            left: event.pageX + 5 + "px"
        }).show();
    }).bind("mouseout", function() {
        $(".compare_tooltip").hide();
    });
});
&lt;/script&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.compare_tooltip {
    position: absolute;
    width: 230px;
    background-color: #F1F1F1;
    border: 1px solid #E2E2E2;
    border-radius: 9px;
    z-index: 99999;
    padding: 10px;
    font-size: 0.9em;
    font-style: italic;
    box-shadow: -1px 1px 2px rgba(184, 184, 184, 0.72);
    display: none;
}
</code></pre>

<p>html:</p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Create Profile on ETLetsTalk Social Community&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Limited Access to ETLetsTalk Community Forum (Read Only)&lt;div class="compare_tooltip"&gt;Users can only view forum posts, topics and replies (read only)&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Community Email Updates&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The effect:</p>

<p><img src="http://i.stack.imgur.com/J4muW.png" alt="enter image description here"></p>

<p>I'm hovering on the link inside ul "Limited Access..." and tooltip comes out near the footer. What am I doing wrong?</p>

<p>With position fixed:</p>

<p><img src="http://i.stack.imgur.com/3lh4E.png" alt="enter image description here"></p>
