Only close tooltip if mouse is not over target or tooltip

Question

Using the jQuery UI tooltip, I would like to keep the tooltip open if I\'m over the target, or if I\'m over the tooltip itself.

I\'m thinking I can use the close cal

Answer 1

Here is the solution I came up with after much searching and testing: http://jsfiddle.net/Handyman/fNjFF/11/

$('#target').tooltip({
    items: 'a.target',
    content: 'Loading…',
    show: null, // show immediately
    open: function(event, ui)
    {
        if (typeof(event.originalEvent) === 'undefined')
        {
            return false;
        }
    
        var $id = $(ui.tooltip).attr('id');
    
        // close any lingering tooltips
        $('div.ui-tooltip').not('#' + $id).remove();
        
        // ajax function to pull in data and add it to the tooltip goes here
    },
    close: function(event, ui)
    {
        ui.tooltip.hover(function()
        {
            $(this).stop(true).fadeTo(400, 1); 
        },
        function()
        {
            $(this).fadeOut('400', function()
            {
                $(this).remove();
            });
        });
    }
});

    

        Hover over me!
        Hover over me too!
    

I was also having a problem with lingering tooltips when there were a bunch of tooltip links in close proximity, so the tooltips would end up stacking or not closing at all, so this closes all other open tooltips when a tooltip is opened.