jQuery load data on hover into element and then hide on unhover

I have the following code:

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

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

        $('body').append($tip);
    },
    function ()
    {
        $('.uiPopup').attr('id', $(this).attr('id')).remove();
    });

and some links:

<a id="12" class="uiTip">Link</a>

<a id="15" class="uiTip">Link</a>

The idea is that when a user hovers a link called开发者_Python百科 uiTip it will append the Div and load in some content using ajax and then on unhover remove the element from the Dom again.

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

Seems to be appending the id to my body instead of the tip!

$tip is not available in the remove function. Assign some ID and then remove the object by ID:

$('a.uiTip').hover(function () {
        $tip = '<div id="theTipIsHere" class="uiPopup" style="position:absolute;top:20px;left:20px;background:#ff0000;width:300px;height:300px;z-index:9999999999;"></div>';
        $(this).append($tip).load(AppUrl + '/Organisations/Ajax/OrganisationDetailsTip');
    },
    function () {
       $('#theTipIsHere',this).remove();
    });

The $tip variable is declared within local scope in the hover over method and therefore not accessible from the hover out method. Reference the uiPopup class within the scope of $(this)

$('a.uiTip').hover(function () {
            $tip = '<div class="uiPopup" style="position:absolute;top:20px;left:20px;background:#ff0000;width:300px;height:300px;z-index:9999999999;"></div>';
            $(this).append($tip).load(AppUrl + '/Organisations/Ajax/OrganisationDetailsTip');
        },
        function () {
            $(".uiPopup", $(this)).remove();
        });

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

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

            console.log($newtip);

            $('body').append($newtip);
        },
        function () {
            $('.uiPopup').remove();
        });