jQuery hover and unhover
<p>I have the following code:</p>

<pre><code>    $('a.uiPopup').hover(function () {          
            $('.uiTip').show();
        },
        function () {
            $('.uiTip').remove();
        });

        $('div.uiTip').live("mouseover", function () {
            $(this).stop(true, true).show();
        });
        $('div.uiTip').live("mouseleave", function () {
            $(this).remove(); });
        });
</code></pre>

<p>So when you hover <code>uiPopup</code> then <code>uiTip</code> appears and then when you unhover it dissapears again BUT if you were to hover over the tip it would stop the tip from being removed and keep it on screen until your mouseleaves and then remove it.</p>

<p>Doesn't work though :/ Any ideas? Thank you</p>

<p><strong>The <code>.remove()</code> is intentionally as in my real script (this being a snippet to show my example) I am using AJAX to load in the .uiHelp and they have unqiue ids (again not shown in the above example as beyond the scope of question) Which all works fine just not the bit about stopping it when the user hovers the tip itself!</strong></p>

<p>EDIT: For those that want to see the full script and why I have to use the hover:</p>

<pre><code>$('a.uiPopup').hover(function () {
            $tip = '&lt;div class="uiTip uiOverlayArrowLeft loading"&gt;&lt;div class="uiOverlayContent"&gt;&lt;!--content here --&gt;&lt;/div&gt;&lt;i class="uiOverlayArrow"&gt;&lt;/i&gt;&lt;/div&gt;';

            $newtip = $($tip).attr('id', 'organisationId-' + $(this).attr('id'));

            $($newtip).find('.uiOverlayContent').load(AppURL + 'Organisations/Manage/Tip', function () { $($newtip).removeClass('loading') });

            $('body').append($newtip);

            $location = $(this).offset(); $top = $location.top; $left = $location.left; $right = $location.right; $bottom = $location.bottom;

            $left = $left + $(this).width();
            $left = $left + 8;

            $top = $top - 10;

            $($newtip).css({
                'top': $top + 'px',
                'left': $left + 'px'
            });
        },
        function () {
            $id = "div#organisationId-" + $(this).attr('id');
            $($id).remove();
        });

        $('div.uiTip').live("mouseover", function () {
            $(this).stop(true, true).show();
        });
        $('div.uiTip').live("mouseleave", function () {
            $(this).remove(); });
        });
</code></pre>
