JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<input type="text" />
<div class="tip" style="display:none;">In cum porttitor natoque ac dolor eros lorem! Ut turpis, integer mattis. A massa porttitor tincidunt sed, eu. Lundium, diam, eros, lundium nisi sagittis, porta. Phasellus mid, cursus augue? Tincidunt urna diam habitasse phasellus rhoncus mid ut phasellus aliquam hac, rhoncus pid cras risus diam et eros amet? Mattis urna ultrices porta cursus </div>

CSS

#container {position:relative;}
.tip {width:200px; border:1px solid #000033;position:absolute;}

JavaScript

$(document).ready(function(){

    $('input').hover(function(){
        var posLeft = $(this).offset().left +30;
        var posTop = $(this).offset().top +30;
      //  alert(posTop);
        $('.tip').css({"top":posTop,"left":posLeft}).fadeIn();
        
        
        },
        function(){
            $('.tip').delay(1200).hide();
        }
    
    
    );

});