Hover Tooltip

by Shobhit Sharma

HTML

<a class="abc">ABC</a>
<div id="def">TEST</div>

CSS

.abc {
    border:1px solid red;
    padding:10px;
}

#def { 
    display:none;
    border:1px solid red;
    padding:10px;
}

JavaScript

$(".abc").mouseenter(function(){
    clearTimeout($('#def').data('timeoutId'));
    $('#def').show(200);
}).mouseleave(function(){
    var timeoutId = setTimeout(function(){
        $('#def').hide(200);
    }, 650);
    $('#def').data('timeoutId', timeoutId); 
});

$("#def").mouseenter(function(){
    clearTimeout($('#def').data('timeoutId'));
}).mouseleave(function(){
    var timeoutId = setTimeout(function(){
        $('#def').hide(200);
    }, 650);
    $('#def').data('timeoutId', timeoutId); 
});