There are several adjacent objects, suggesting an animation hint to each of them (a list of ul , in which li appear one after another smoothly). Since there are many elements and the user can abruptly follow them, he decided to make a delay in the form of debounce(f, 150ms) . But now if you randomly hover over an object and not interact in principle, the hint of the last affected object appears with anything (it is logical), since debounce triggered later than .stop().fadeOut() worked. And sometimes there is a bug that if you pull a hand from one object to another (did not recreate it here, maybe someone can figure it out, if not, I will try to give an example), then a hint appears under the cursor, but since it overlaps the object , which shows that it immediately disappears and the mouse on the object again, the hint appears and everything goes in cycles.

 function debounce(f, ms) { let timer = null; return function (...args) { const onComplete = () => { f.apply(this, args); timer = null; } if (timer) { clearTimeout(timer); } timer = setTimeout(onComplete, ms); }; } function renderHint() { $('#hint').stop().append('123').fadeIn('100'); } let renderHintDebounce = debounce(renderHint, 150); $('.block').on('mouseenter', function(e) { $('#hint').empty(); $(this).mousemove(function(pos) { $("#hint") .css('left', (pos.pageX + 50)+'px') .css('top', (pos.pageY - 30)+'px'); }); renderHintDebounce(); }); $('.block').on('mouseleave', function(e) { $('#hint').stop().fadeOut(100).queue(function() { $(this).empty().dequeue(); }) }); 
 .container { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; } .block { width: 100px; height: 100px; background: red; } #hint { position: absolute; display: none; background: #eee; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="block"></div> </div> <div id="hint">123</div>

Added . If the tooltip removed additions by location ie The added 50 and 30 pixels then the error with the appearance and disappearance of the hint is similar to the one that I have.

    2 answers 2

     $(function(){ let hint=$('#hint'), hintTimer, fadeTime=400 $('.block').on('mouseenter', function(e) { let el=$(this) el.mousemove(function(pos) { hint .css('left', (pos.pageX + 50)+'px') .css('top', (pos.pageY - 30)+'px'); }); hintTimer=setTimeout(()=>hint.html(el.attr('hint')).fadeIn(fadeTime),fadeTime) }); $('.block').on('mouseleave', function(e) { if(hintTimer) clearTimeout(hintTimer) hint.off('mousemove').fadeOut(fadeTime) }); }) 
     .container { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; } .block { width: 100px; height: 100px; background: red; border:1px solid white; } #hint { position: absolute; display: none; background: #eee; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="block" hint="FIRST red thing"></div> <div class="block" hint="SECOND red thing"></div> <div class="block" hint="THIRD red thing"></div> </div> <div id="hint">123</div>

    • Something this code did not give me the desired effect, now it turned out that when passing the cursor on a pile of objects at once, the script plays the animation as many times as many objects were hooked = / - Alexey
    • @Alexey for several objects then it’s better not to work with the animation queue at all, it was possible to rebuild your program logic with timers. Code updated. - Diskyp
    • one
      @ Alexey, is your problem solved now? Need more help? - Diskyp

    such interface "features", although they seem simple at first glance, are actually quite complex in implementation. Yes, just show / hide, but to achieve a stable and "beautiful" work in different browsers and stacks oh, very difficult.

    Use community experience, for example:

    One debounce here is not enough, you need to provide all possible behaviors, plus options for resizing the window. Definitely answer the question is not possible. It still will not be the right answer.

    • But why offer libraries as an answer when the TS wants to sort out its problem with the code? - Diskyp
    • The experience of the community is very good, I will take into account necessarily and, if possible, I will rewrite my code more stable. But as noted, @Diskyp, I wanted, of course, for the time being to solve this problem. But all-exactly thanks to you - Alexey
    • I agree, learn. But I see every day how the experience of people who spent 1000 hours to solve the classic problems of web interfaces is ignored. And how “one-day non-working solutions” are created, yes this is experience, but experience is bad. Why then patterns and libraries? You solve a standard problem and faced with quite standard problems. Good luck. - diproart
    • @diproart if we talk about programming experience, it is much better to try to write your own solutions, as the TS does. Even better, in case of failures, ask for advice from more experienced people, as the vehicle does. Thus, once the vehicle itself can become the creator of beautiful web interfaces. And in no case should you simply use everything that is ready, it hurts mental and professional development only if you don’t need to urgently complete a certain order and don’t have time for creativity. - Diskyp
    • I understand you, thanks. Libraries are experienced people. Reading and understanding someone else's code is the norm for any programmer. But I do not argue with you, do as you like. Let everyone choose their own path. - diproart