Redefine Tipsy delayOut configuration option with onClick

Redefine Tipsy delayOut configuration option with onClick




I know how to change an attribute such as a title with onClick, but I'd like to be able to change delayOut with onClick if possible.


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. All that works great, but the thing I don't like is that I have to set the delayOut time for about 20 seconds 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();" to each link and it helps, 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.
A simplified version of the code for this is as follows:


  1. $(document).ready(function(){
  2. $('#1').tipsy({fade: true, opacity: 1.0, html: true});
  3. $('#1').click(function(){
  4. $('.tipsy').remove();
  5. // Next line doesn't work to set the delayOut time
  6. $(this).tipsy({fade: true, opacity: 1.0, html: true, delayOut: 10000});
  7. $(this).tipsy('show');
  8. return false;
  9. });
  10. });




  1. <?php
  2. $link = "index.php";
  3. $text = "<a href=" . $link . ">Test Link</a>";
  4. ?>




  9. <a id="1" href="#" onmouseover="$('.tipsy').remove();" title="This is a Test" 
  10. onclick="$('#1').attr('title', '<?php echo $text; ?>');">Click Me</a>

I have read the Tipsy documentation and thought maybe the "live" events might be the ticket, but so far I haven't got that to do it. Also the commented out line in the function above was what I originally thought would redefine the configuration options, but that hasn't worked either. So I was hoping someone would know how to change the delayOut time when the link is clicked.