jQuery Tooltip UI - grilletto tooltip dopo x secondi

Ecco quello che ho finora:jQuery Tooltip UI - grilletto tooltip dopo x secondi

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

È possibile che questo sta lavorando come si supponga di lavorare, però, vorrei far scattare il tooltip solo dopo che il mouse passa il collegamento per un determinato periodo di tempo (ad esempio 2 secondi, ad esempio).

Inoltre, desidero annullare il trigger se l'utente sposta il mouse fuori dal collegamento prima che scada il tempo di ritardo specificato.

Qualcuno può aiutarmi per favore su questo?

Grazie mille.

fonte

2013-05-11 BornKillaz

sono finalmente riuscito a ottenere ciò che stavo cercando.

Ecco il risultato finale:

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

fonte

2013-05-13 13:28:43 BornKillaz

si può provare questo:

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

la show proprietà accetta parametri oggetto con le seguenti proprietà; effect, delay, duration, and easing.

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

fonte

2013-05-11 16:29:52

Grazie per la risposta. Funziona, almeno aggiunge un ritardo, tuttavia, non controlla il trigger, ma ritarda solo la visualizzazione dei contenuti. Nella mia situazione, questo è un problema, poiché il contenuto viene restituito tramite AJAX (ho già modificato il mio codice) e voglio caricare quel processo solo se il mouse rimane per quei x secondi al passaggio del mouse. – BornKillaz

jQuery Tooltip UI - grilletto tooltip dopo x secondi

risposta

Problemi correlati