What's the best way to create a simple hover card effect using CSS and JavaScript?

I have been trying to create a hover card effect, but I am facing some problems. When someone hovers an image, a detailed view should appear below/above my cursor position (depending on how much space is available). I have the following code :

$('.prof-image').hover(function(){
  var pos = $(this).offset();
  $('#hover-card').css({
    'top': pos.top + 30 + 'px',
    'left': pos.left - 100 + 'px'
  });
});

But this code doesn't position the hover card correctly once I scroll down the page and hover on a particular image. What's the best way to implement this? Any suggestions/modifications will be highly appreciated!

Also if there is a plugin that handles all these please suggest.

Many Thanks!