jQuery load data on hover into element and then hide on unhover
<p>I have the following code:</p>

<pre><code>$('a.uiTip').hover(function ()
    {
        $tip = '&lt;div class="uiPop" style="position:absolute;top:20px;left:20px;background:#ff0000;width:300px;height:300px;z-index:9999999999;"&gt;&lt;/div&gt;';

        $($tip).attr('id', $(this).attr('id')).load(AppURL + 'Organisations/Manage/Tip');

        $('body').append($tip);
    },
    function ()
    {
        $('.uiPopup').attr('id', $(this).attr('id')).remove();
    });
</code></pre>

<p>and some links:</p>

<pre><code>&lt;a id="12" class="uiTip"&gt;Link&lt;/a&gt;

&lt;a id="15" class="uiTip"&gt;Link&lt;/a&gt;
</code></pre>

<p>The idea is that when a user hovers a link called uiTip it will append the Div and load in some content using ajax and then on unhover remove the element from the Dom again.</p>

<p>However it remains on the page... Any ideas why and how to fix this?</p>

<p><strong>Seems to be appending the id to my body instead of the tip!</strong></p>
