Reset tooltip on close

Question

I'm using jQuery UI's tooltip and ultimately, I'm trying to reset the tooltip back to it's first initial state.

Since there doesn't seem to be a “reset” function, any idea how I can accomplish this?

So far, I've tried using the close callback function, which I can reset the tooltip, but then the tooltip doesn't close. I can't find anything in the documentation for how to close the tooltip while using the close callback function.

jsFiddle link: http://jsfiddle.net/Handyman/mJMD5/

var $selector = $('div.content div.rounded_corners'),
    $timeout;

$selector.tooltip({
    items: 'a.detail',
    content: $loader,
    open: function(event, ui)
    {
        // test this with a timeout to find out what will happen if I use AJAX to bring in the content
        $timeout = setTimeout(function()
        {
            // replaces the loading image with this text, but changes the content for all tooltips, which is undesirable
            $selector.tooltip('option', 'content', 'sometimes you just have to wait a second');
        }, 2000);
    },
    close: function()
    {
        // reset the content back to the loading image
        $selector.tooltip('option', 'content', $loader);
        clearTimeout($timeout);

        // adding return true doesn't have any effect on if the tooltip closes or not
        return true;
    }
});

Answer 1

Here is a solution, you need to reinit the tooltip by doing something like this:

close: function()
{
    // reset the content back to the loading image
    $selector.tooltip('close').tooltip('destroy').attr('title','hello');     

    clearTimeout($timeout);
    fnAddToolTip(); 
    // adding return true doesn't have any effect on if the tooltip closes or not
    return true;
}

Here is a fiddle: http://jsfiddle.net/dwaddell/87wV3/

Here is the solution added to your fiddle: http://jsfiddle.net/dwaddell/mJMD5/1/