jQuery-UI-Tooltip - trigger-tooltip nach x Sekunden

Hier ist was ich habe, so weit:

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

Oben so funktioniert, wie es wohl funktionieren, allerdings würde ich gerne die tooltip-trigger erst nach der Maus mit der Maus über den link für eine bestimmte Zeit (z.B. 2 Sekunden, zum Beispiel).

Außerdem würde ich gerne kündigen, es auslösen, wenn der Benutzer bewegt die Maus aus dem link, bevor die festgelegte Verzögerungszeit abgelaufen ist.

Kann jemand bitte helfen Sie mir auf diesem?

Danke Ihnen sehr.

InformationsquelleAutor BornKillaz | 2013-05-11
  1. 8

    Ich es endlich geschafft, zu erreichen, was ich suchte.

    Hier ist das Ergebnis:

    <!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>
    InformationsquelleAutor BornKillaz
  2. 0

    können Sie versuchen, diese:

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

    den show Eigenschaft akzeptiert object-parameter mit den folgenden Eigenschaften;
    effect, delay, duration, and easing.

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

    • Danke für Eure Antworten. Es funktioniert, zumindest sieht es fügt eine Verzögerung, aber es nicht Steuern, es ist ein trigger, es nur verzögert auf seinen Inhalt anzuzeigen. In meiner situation, das ist schlecht, da der Inhalt zurückgegeben wird via AJAX (die ich bereits bearbeitet mein code), und ich möchte zu laden, der Vorgang nur, wenn die Maus bleibt für diese x Sekunden wenn Sie den link.
    InformationsquelleAutor Jude Duran
Schreibe einen Kommentar