jQuery的工具提示UI - x秒後觸發提示

這是我到目前爲止有：jQuery的工具提示UI - x秒後觸發提示

<!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>

以上的工作，因爲它是假設的工作，但是，我想只有鼠標後觸發提示將鏈接懸停一段時間（例如2秒）。

此外，我想取消它的觸發器，如果用戶在指定的延遲時間到期之前將鼠標移出鏈接。

有人能幫我解決這個問題嗎？

非常感謝。

來源

2013-05-11 BornKillaz

我終於實現了我一直在尋找。

下面是最終的結果：

<!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>

來源

2013-05-13 13:28:43 BornKillaz

你可以試試這個：

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

的show屬性接受具有以下屬性的對象參數; effect, delay, duration, and easing。

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

來源

2013-05-11 16:29:52

謝謝您的答覆。它確實有效，至少它增加了一個延遲，但是，它不控制它的觸發，它只會延遲它的內容顯示。在我的情況下，這是不好的，因爲內容是通過AJAX返回的（我已經編輯了我的代碼），並且我只想在鼠標停留在那些x秒盤旋鏈接的情況下加載該進程。 – BornKillaz 2013-05-11 16:38:10

jQuery的工具提示UI - x秒後觸發提示

回答

相關問題