Question

I have the following 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(); });
        });

So when you hover uiPopup then uiTip 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.

Doesn’t work though :/ Any ideas? Thank you

The .remove() 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!

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

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

            $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(); });
        });

Answer 1

Well, you mention uiTip in one snippet and uiHelp in another. Is the uiTip somewhere inside the uiHelp div? If so, the problem is that your mouse leaves the link to get on top of the tooltip div, and so it is removed before your mouse is ever considered “over” the div.

Here’s a possible solution:

$('a.uiPopup').hover(function () {
  $('.uiHelp').show();
}, function () {
  $('.uiHelp').data('timer', setTimeout(function () {
    $('.uiHelp').remove();
  }, 100));
});

$('div.uiHelp').live('mouseover', function () {
  if ($(this).data('timer')) {
    clearTimeout($(this).data('timer'));
  }
});

$('div.uiHelp').live('mouseleave', function () {
  $(this).remove();
});

This gives the user a tenth of a second to get from the link over the tooltip, before it disappears. You can adjust that time in the setTimeout call.

I’ll leave it up to you to sort out uiTip/uiHelp – you just need somewhere to store the reference to the timer.