JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<div id="spCBubble">
</div>
<div id="noteBubble">
    I will disappear in 5 seconds
</div>

CSS

#spCBubble,#noteBubble{float:left;width:50px;height:auto;border:1px red solid;padding:20px;margin:10px;}#noteBubble{display:none;}

JavaScript

jQuery(function(){    
    
    jQuery("#spCBubble").mouseover(function(){
        jQuery("#noteBubble").fadeIn("slow");        
        sad= setTimeout(hideBack,"5000");
    });
    
    jQuery("#noteBubble").mouseenter(function(){
        clearTimeout(sad);        
    });
    
    jQuery("#noteBubble").mouseleave(function(){
        jQuery(this).fadeOut("slow");        
    });
    jQuery(document).scroll(function(){
        jQuery("#noteBubble").fadeOut("slow");    
    });
    function hideBack(){
        jQuery("#noteBubble").fadeOut("slow");
    }    
    
})