Tooltip

by michieljoris

HTML

<div id='user'>I am a user. Move your mouse over me</div>
<div id='popup'>Extended info about a userkhkjhkjhklhkl kj kjkl</div>
<div>I a piece of useless information. No use hovering over me.</div>

CSS

#popup {
    
    width: auto;
    text-align: center;
    vertical-align:middle;
    background-color: cornflowerblue;
    color: white;
    display: none;
    padding: 3px;
    

    position: absolute;
}

JavaScript

$('#user').hover(function() {
    setTimeout(function() {$('#popup').show();},900);
}, function() {
    $('#popup').hide();
});