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

jQueryのツールチップUI - トリガツールチップのx秒後

答えて

関連する問題