Edit in JSFiddle

$('#wrapper').position({
    of: $(window),
});
$('#popup').position({
    of: '#wrapper',
    collision: 'fit',
});
$('#wrapper').on('mousemove', function(e) {
    $('#popup').position({
        my: 'left top',
        of: e,
        offset: '10 10',        
    });
});
$('#wrapper').hover(function(e) {
    $('#popup').fadeIn();
}, function(e) {
    $('#popup').fadeOut();
});

<div id="wrapper">
    <p>A pop up will be shown</p>
    <div id="popup">
        <h4>Information</h4>
        <p>
            There is no information.
        </p>
    </div>
</div>

body{
    background-color: yellow;
}

#wrapper {
    width: 300px;
    height: 300px;
    background-color: cyan;
}

#popup {
    background-color: rgba(255,255,255,0.8);
    border: solid 1px black;
    text-align: center;
    width: 200px;
    padding: 20px;
    border-radius: 20px;
    display: none;
}