Hello, please help. There is such a script:

$(document).ready(function(){ function showProfileTooltip(e, id){ var top = e.clientY + 20; var left = e.clientX - 10; $('.p-tooltip').css({ 'top':top, 'left':left, }).show(); $.ajax({ url: 'friends/dynamic_frds.php?id='+id, beforeSend: function(){ $('.p-tooltip').html('Loading..'); }, success: function(html){ $('.p-tooltip').html(html); } }); } function hideProfileTooltip(){ $('.p-tooltip').hide(); } $('.fr').mouseover(function(e){ var id = $(this).attr('data-id'); showProfileTooltip(e, id); }); $('.p-tooltip').mouseleave(function(){ hideProfileTooltip(); }); });

How to make it so that when you hover on an object, the content is not immediately displayed, for example, a second after pointing, that is, if the user hovers over the block and waits a second, then download the content. Tell me please.

    2 answers 2

    Use timeout.

    A standard template for such actions is not triggered immediately; we trigger an event once.

     var TO; function showProfileTooltip(e, id){ clearTimeout(TO); TO=setTimeout(function() { //тут то что было раньше в функции },1000); //секунда это много.... } function hideProfileTooltip(){ clearTimeout(TO); showProfileTooltip(e, id); }
    • @eicto Excuse me, of course, but as the saying goes I'm a noob in jquery, can you please substitute where you need it? If it is not hard for you. - andreykartavtsev
    • @Andrey Kartavtsev is the same as yours, just wrap the body of showProfileTooltip () in what I showed, and add a line to hideProfileTooltip () and var will be announced immediately in document.ready - zb '
    • I forgot to assign the assignment there :) corrected. - zb '
    • in general, in itself, it is crookedly done, no need to rely on id :) in general. right now, I'll show you how. - zb '
    • @eicto Yes, please show. - andreykartavtsev

    try this:

     success: function(html){ $('.p-tooltip').delay(1000).html(html); }

    UPD: functions need to be declared outside of $ (document) .ready (), and not inside

    • @mountpoint No, that doesn't help. Now, if you sat there on youtube when you hover, for example, the username comes up with a tooltip after some time, I need this tooltip only after a couple of seconds. - andreykartavtsev
    • delay works only for animation. loading will still occur. > UPD: functions need to be declared outside of $ (document) .ready (), and not inside why? - zb '
    • @eicto, because in $ (document) .ready () actions must be performed after the DOM is loaded. And functions, it is desirable to download immediately - mountpoint
    • @mountpoint you are badly mistaken, you need to keep functions outside of global, I would understand if you offered to collect an object with methods ... or jQuery plugin. in general, it is quite normal to declare local functions in document.ready () - zb '