5

これが私がこれまでに持っているものです：

<!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 秒など) リンクをホバーした後にのみツールチップをトリガーしたいと考えています。

また、指定された遅延時間が経過する前にユーザーがマウスをリンクの外に移動した場合、トリガーをキャンセルしたいと思います。

誰でもこれについて私を助けてもらえますか?

どうもありがとうございました。

4

2 に答える 2

7

私は最終的に私が探していたものを達成することができました.

最終結果は次のとおりです。

<!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-13T13:28:43.030 に答える
0

あなたはこれを試すことができます：

$(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-11T16:29:52.177 に答える