可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Here is what I have so far:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Tooltip Testings</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css"> 
      body { margin: 60px auto; } p { padding:0; margin: 4px auto; text-align: center; }
    </style>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(function() {
      $(document).tooltip({
        items: '.tooltip',
        show: 100,
        hide: 500,
        position: { my: 'center bottom', at: 'center top' },
        content: function( callback ) {
          var msgid = this.id.split('_')[1];
          $.ajax({
            type: 'post',
            url: '/tooltip.php',
            data:'i='+msgid,
            success: function( data ) { callback( data ); }
          });
        }
      });
    });
    </script>
  </head>
  <body>

    <p><a class="tooltip" id="i_283" href="articles/programming-in-php.html">PHP Article</a></p>
    <p><a class="tooltip" id="i_567" href="articles/programming-in-c.html">C+ Article</a></p>
    <p><a class="tooltip" id="i_741" href="articles/programming-in-aspx.html">ASPX Article</a></p>
    <p><a class="tooltip" id="i_860" href="articles/programming-in-java.html">Java Article</a></p>

  </body>
</html>

The above is working as it's suppose to work, however, I would like to trigger the tooltip only after the mouse hovers the link for an specific amount of time (like 2 seconds, for example).

Also, I would like to cancel it's trigger if the user moves the mouse out of the link before the specified delay time expires.

Can anybody please help me out on this?

Thank you very much.

回答1:

I finally managed to achieve what I was looking for.

Here is the final result:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Tooltip Testings</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css"> 
      body { margin: 60px auto; } p { padding:0; margin: 4px auto; text-align: center; }
    </style>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(function() {
      $(document).tooltip({
        items: '.tooltip',
        show: 100,
        hide: 500,
        position: { my: 'center bottom', at: 'center top' },
        content: function( callback ) {
          var ARTid = this.id.split('_')[1];
          var TTtmr = setTimeout( function() {
            $.ajax({
              type: 'post',
              url: '/tooltip.php',
              data: 'i='+ARTid,
              success: function( data ) { callback( data ); }
            }); 
          }, 800 );
          $('.tooltip').mouseleave( function() { clearTimeout( TTtmr ); } );
        }
      });
    });
    </script>
  </head>
  <body>

    <p><a class="tooltip" id="i_283" href="articles/programming-in-php.html">PHP Article</a></p>
    <p><a class="tooltip" id="i_567" href="articles/programming-in-c.html">C+ Article</a></p>
    <p><a class="tooltip" id="i_741" href="articles/programming-in-aspx.html">ASPX Article</a></p>
    <p><a class="tooltip" id="i_283" href="articles/programming-in-java.html">Java Article</a></p>

  </body>
</html>

回答2:

you can try this:

$(function() {
      $(document).tooltip({
        items: '.tooltip',
        hide: 500,
        position: { my: 'center bottom', at: 'center top' },
        content: 'Testing jquery tooltips!',
        show: {
          effect: "slideDown",
          delay: 250
        }
      });
    });

the show property accepts object parameter with the following properties; effect, delay, duration, and easing.

http://api.jqueryui.com/tooltip/#option-show