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:
// 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:
$.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:
$('#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:
<?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.