Facebook Style Hovercard using JQuery and CSS

Facebook has a feature of displaying the hover card when you hover over a link of a user, page or a group. I always wondered how this could be done. I tried creating my own hover card feature like facebook and came up with this.

I used CSS to give facebook like feel to the hover card.

#hoverbox {
    background-color: white;
    border: solid 1px #BCBCBC;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    color: #666;
    font-size: 13px;
    width: 350px;
    height: 230px;
    overflow: hidden;
    position: absolute;
    word-wrap: break-word;
    z-index: 1202;
    display: none;
    margin-top: -10px;
}

#hoverbox img#cover {
    width: 100%;
    height: 62%;
    float: left;
}

#hoverbox img#profile {
    width: 90px;
    height: 90px;
    position:absolute;
    bottom:20%;
    left:3%;
    z-index: 1234;
    background-color: #FFFFFF;
    border: 3px solid #FFFFFF;
    border-radius:1px;
}

#hoverbox_name{
    font-size: 17px;
    position: absolute;
    top:50%;
    left: 35%;
    color:#FFFFFF;
}

#hoverbox_bottom{
    width:100%;
    height:18%;
    position:absolute;
    bottom:0px;
    background-color: #eee;
}

#fbstyle_button{
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #EEEEEE;
    background-image: linear-gradient(#F5F6F6, #E4E4E3);
    border-color: #999999 #999999 #888888;
    border-image: none;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 #FFFFFF inset;
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font: bold 11px 'lucida grande',tahoma,verdana,arial,sans-serif;
    margin: 0;
    overflow: visible;
    padding: 0.3em 0.6em 0.375em;
    position: relative;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;  
}
a{
    font-size: 18px;
    margin-top:10px;
    margin-bottom:10px;
    text-decoration: none;
    color:#444;
    padding: 5px;
}  

The javsacript code is as below. The mouseenter event is caught when the user moves the mouse over the link or image and hover card is displayed at the position of the cursor. You can fetch the data from the database by making an ajax call if necessary.

            $(function(){
                $('#hoverbox').mouseleave(function(){
                    $('#hoverbox').hide();
                });
                
                $(".trigger").mouseenter(function(e){                  
                    //you can get picture addresses and the user_name from the database by making an ajax at this point.
                    //You can either store used id or the full link in an attribute in the hyperlink or photo.
                    var  cover_pic = "abc.jpg";
                    var  profile_pic = "xyz.jpg";
                    var  user_name = "Chethan";
                    var display_content =  '

' + user_name + '


';
                    
                    var pos = {
                        top: (e.clientY ) + 'px',
                        left: (e.clientX ) + 'px'
                    };
                    $('#hoverbox').css(pos).html(display_content).show(400);
                }).mouseleave(function(e) {
             if ($(e.relatedTarget).attr('id') != "hoverbox") {
                $('#hoverbox').hide();
            };
            });
            });            
       

Try Demo Download Script