我如何拥有Google+风格的悬浮卡？

Question

I really like the Google+ style hovercard. When you hover over a profile picture, it pops up a little box, similar to the "established users" hovercards here on Stack Overflow.

I know how to do the CSS, but the JavaScript is what I need help with.

I have a code here that is somewhat like it: http://jsfiddle.net/NathanJohnson/AhVQN/ But, it doesn't work that good. The mouse offset does not work correctly.

Could someone help me with getting this working properly? Thanks in advance.

Answer 1

You can change the mouse offset in this section:

  var pos = {
        // or you could position it relative to the mouse
        top: (e.clientY + 2) + 'px',
        left: (e.clientX + 2) + 'px'
    };

Change the e.clientY + 2 to e.clientY + 1 and the hovercard will be closer to the cursor.