CODEWITHSUNDEEP
javascriptjquerygoogle-plus
Nathan
Nathan

Reputation: 12000

How can I have the Google+ style hovercard?

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.

Google+ Hover-card

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.

Upvotes: 3

Views: 1183

Answers (1)

banjomonster
banjomonster

Reputation: 589

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.

Upvotes: 1

Related Questions