jQuery Tooltip UI - Trigger Tooltip nach x Sekunden

Hier ist, was habe ich bisher:jQuery Tooltip UI - Trigger Tooltip nach x Sekunden

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

Die obige Arbeit wird, wie es jedoch vermuten ist, zu arbeiten, würde Ich mag die Tooltip auslösen erst nach der Maus bewegt den Link für eine bestimmte Zeit (z. B. 2 Sekunden).

Ich möchte auch seinen Auslöser abbrechen, wenn der Benutzer die Maus aus der Verbindung bewegt, bevor die angegebene Verzögerungszeit abläuft.

Kann mir bitte jemand helfen?

Vielen Dank.

Quelle

2013-05-11 BornKillaz

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

Hier ist das Endergebnis:

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

Quelle

2013-05-13 13:28:43 BornKillaz

Sie können dies versuchen:

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

die show Eigenschaft akzeptiert Objektparameter mit den folgenden Eigenschaften: effect, delay, duration, and easing.

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

Quelle

2013-05-11 16:29:52

Vielen Dank für Ihre Antwort. Es funktioniert, zumindest fügt es eine Verzögerung hinzu, steuert jedoch nicht den Auslöser, es verzögert nur die Inhaltsanzeige. In meiner Situation ist dies schlecht, da der Inhalt über AJAX zurückgegeben wird (ich habe bereits meinen Code bearbeitet), und ich möchte diesen Prozess nur laden, wenn die Maus für die x Sekunden bleibt, die den Link halten. – BornKillaz

jQuery Tooltip UI - Trigger Tooltip nach x Sekunden

Antwort

Verwandte Themen