Basically I have a dynamic list of links that display a tooltip when hovered over. When a link is clicked the tooltip changes to a selection of sub-links the user can click (example below). All that works great, but the thing I don't like is that I have to set the delayOut time for about 10000 ms to give them time to read and click a sub-link. So if they move the mouse over the list there are a lot of tips on at once that block the other links from being able to be clicked.
I did a workaround by adding onmouseover="$('.tipsy').remove();" and a 250 ms delayIn time to each link and it pretty much solves the problem, but I would really like to change the delayOut time so the initial tooltip is only on while the mouse hovers, and the second tooltip (after the click) has a longer delay.

In searching for an answer to this problem I noticed in the jquery.tipsy.js file the following lines that I would think are the answer to the problem:
Code:
    // Overwrite this method to provide options on a per-element basis.
    // For example, you could store the gravity in a 'tipsy-gravity' attribute:
    // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
    // (remember - do not modify 'options' in place!)
    $.fn.tipsy.elementOptions = function(ele, options) {
        return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
    };
So i change it to:
Code:
    $.fn.tipsy.elementOptions = function(ele, options) {
        return $.extend({}, options, {delayOut: $(ele).attr('tipsy-delayOut') || 0 });
    };
My thinking is that by changing the configuration option to an attribute it will be changeable such as:
Code:
		$('#1').tipsy({fade: true, gravity: 'e', opacity: 1.0, delayIn: 250, html: true});

			$('#1').click(function(){
				$('.tipsy').remove();
				$(this).attr('tipsy-delayOut', 10000);
    			        $(this).tipsy('show');
    			         return false;
  			});
Which would use the same thinking as the code I currently use to change the title attribute for the links:
Code:
<?php
$link = "index.php";
    $text = "<a href=" . $link . ">Test Link</a>";
?>

<a id="1" href="#" onmouseover="$('.tipsy').remove();" title="This is a Test" 
onclick="$('#1').attr('title', '<?php echo $text; ?>');">Click Me</a>
I have posted variations of this question on other sites, but so far haven't received any help. The solution I have already in place is about 90% effective, but being a perfectionist I really would love that extra 10% lol.
Any help or suggestions are welcome.