tooltip reset test

Attempting to reset the tooltip back to it's original state.

HTML

<div class="content">
    <div class="rounded_corners">
        <h3>Tooltip test</h3>
        <ul>
            <li>some data <a href="#detail" class="detail">Detail</a></li>
            <li>More data <a href="#detail" class="detail">Detail</a></li>
            <li>Other data <a href="#detail" class="detail">Detail</a></li>
        </ul>
    </div>
</div>

JavaScript

$(function()
{
    var $selector = $('div.content div.rounded_corners'),
        $timeout,
        $loader = 'Loading image - text stand-in';

    function fnAddTooltip ()
    {
    $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('close').tooltip('destroy');
                  alert('ok');
                  fnAddTooltip();
            clearTimeout($timeout);
    
            // adding return true doesn't have any effect on if the tooltip closes or not
            return true;
        }
    });}
    
    fnAddTooltip();
});