Javascript Girl
  1. Javascript Girl
  3. JQuery Tooltip UI – déclenche une info-bulle après x secondes
Intereting Posts
Calcul des millisecondes depuis l'époque Comment réussir une matrice Javascript via JQuery Post pour que tout son contenu soit accessible via le tableau PHP $ _POST? Quelle est la meilleure façon de limiter la quantité de texte qui peut être entré dans un 'textarea'? Simuler la typage lente dans Protractor Javascript – Appliquer la fonction de trim à chaque chaîne dans un tableau La barre de défilement par défaut de la barre de défilement parfaite reste et la "barre de défilement parfaite" n'est pas fonctionnelle Html rend le texte cliquable sans en faire un lien hypertexte Dessin svg: cercle sur d3.svg.area (). Interpoler ("base") Comment vérifier si un nombre est flottant ou entier? Conversion de la chaîne d'entrée utilisateur en expression régulière Chaîne JavaScript stockée sur pile Formulaire de soumission jquery, puis affiche les résultats dans une division existante Créer un numéro unique avec un temps javascript Iframe not rendering in ie9 mode when containing page est en mode supermarché Permettez la visibilité de div

JQuery Tooltip UI – déclenche une info-bulle après x secondes

Voici ce que j'ai jusqu'ici: 

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

Ce qui précède fonctionne comme il est supposé fonctionner, cependant, je voudrais déclencher la info-bulle uniquement après que la souris survienne le lien pour une durée spécifique (comme 2 secondes, par exemple).

Aussi, j'aimerais annuler le déclencheur si l'utilisateur déplace la souris hors du lien avant que le délai spécifié expire.

Est-ce que quelqu'un peut m'aider à ce sujet?

Merci beaucoup.

J'ai finalement réussi à réaliser ce que je cherchais.

Voici le résultat final: 

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

Vous pouvez essayer ceci: 

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

La propriété show accepte le paramètre objet avec les propriétés suivantes; effect, delay, duration, and easing .

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