How do I use jQuery to display an HTML element?
<p>I have some code here that is supposed change <code>display: none</code> to <code>display: block</code> on 1 element when you mouse over another element.</p>

<p><strong>HTML:</strong></p>

<p><code>&lt;li onmouseover="popup('Ipsum');"&gt;Lorem&lt;/li&gt;</code></p>

<p><strong>Javascript:</strong></p>

<pre><code>$(document).ready(function(){
    $("body").append('&lt;div id="pup"&gt;&lt;/div&gt;'); // Appends a popup div to the page
    $(document).mousemove(function(e){
        var x,y;                                   // This sets the mouse
                                                   // coordinates into 2
        x = $(document).scrollLeft() + e.clientX;  // variables in order to
        y = $(document).scrollTop() + e.clientY;   // display the tooltip
    });                                            // relative to mouse postition

    function popup(text)
    {
        $('#pup').html(text);  // This is supposed to enter text into the tooltip
        $('#pup').show();      // div and change it from display: none to
                               // display: block
    }
</code></pre>

<p>Currently, the div exists (however you can't see it because it is set to <code>display: none</code> in the CSS, but when you mouse over the li it isn't displayed. Thanks!</p>
