jQuery Tooltip UI - podpowiedzi wyzwalacza po x sekundach

Oto co mam do tej pory:jQuery Tooltip UI - podpowiedzi wyzwalacza po x sekundach

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

Powyższy pracuje jak to przypuszczać, aby pracować, jednak chciałbym, aby wywołać podpowiedź tylko po mysz unosi link przez określony czas (na przykład 2 sekundy).

Ponadto, chciałbym anulować jego wyzwalanie, jeśli użytkownik usunie mysz z linku przed upływem określonego czasu opóźnienia.

Czy ktokolwiek może mi pomóc w tej sprawie?

Dziękuję bardzo.

Źródło

2013-05-11 BornKillaz

końcu udało mi się osiągnąć to, czego szukałem.

Oto efekt końcowy:

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

Źródło

2013-05-13 13:28:43 BornKillaz

można spróbować to:

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

show nieruchomość akceptuje parametr obiektu o następujących właściwościach; effect, delay, duration, and easing.

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

Źródło

2013-05-11 16:29:52

Dziękuję za odpowiedź. Działa, przynajmniej dodaje opóźnienie, jednak nie kontroluje jego wyzwalacza, opóźnia jedynie wyświetlenie zawartości. W mojej sytuacji jest to złe, ponieważ zawartość jest zwracana przez AJAX (już edytowałem mój kod), i chcę załadować ten proces tylko wtedy, gdy mysz pozostaje dla tych x sekund unoszących link. – BornKillaz

jQuery Tooltip UI - podpowiedzi wyzwalacza po x sekundach

Odpowiedz

Powiązane problemy