All geek questions in one place

JQuery Tooltip UI - start prompt in x seconds

Here is what I still have:

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

The above works as expected to work, however, I would like to pop up a tooltip only after the mouse hangs a link for a certain amount of time (for example, 2 seconds).

In addition, I would like to cancel it if the user pulled the mouse out of the link before the expiration of the specified delay time.

Can anyone help me with this?

Thank you very much.

+6
source share
2 answers

Finally, I managed to achieve what I was looking for.

Here is the final result:

 <!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>
+8
source

you can try the following:

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

the show property accepts an object parameter with the following properties; effect, delay, duration, and easing .

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

0
source

Source: https://habr.com/ru/post/944772/

More articles:


All Articles