Facebook style Hovercard using jQuery and CSS

Facebook UI has a lot’s of components that is adapted worldwide by millions of users. One of the features is Hovercard. It is displayed when a user hovers over a name of a page/person/group. Here, that feature implemented using jQuery and CSS.


I have implemented this as a static response. There is no server side response involved.

Required Elements

jQuery - JavaScript library

Tooltipster jQuery Plugin - Tooltipster is a great jQuery plugin that you should checkout. You can also implement this feature on your own without using a library, but following DRY (just for implementing this) is what made me use this. There are also other jQuery plugins that can be used to implement this UI feature.

HTML Code

<div class="hovercard">
    <div>
        <div class="display-pic">
            <div class="cover-photo">
            <div class="display-pic-gradient"></div><img src=
            "dp.jpg"></div>

            <div class="profile-pic">
                <div class="pic"><img src="avatar.jpg" title=
                "Profile Image"></div>

                <div class="details">
                    <ul class="details-list">
                        <li class="details-list-item">
                            <p><span class="glyph glyph-home"></span>
                            <span>Also Lives in <a href="#">Chennai</a>
                            <a href="#">TamilNadu</a></span></p>
                        </li>

                        <li class="details-list-item">
                            <p><span class="glyph glyph-work"></span>
                            <span>Founder at <a href=
                            "#">CodeDodle</a></span></p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="display-pic-gradient"></div>

        <div class="title-container">
            <a class="title" href="#" title="Visit Page">Tamil Selvan</a>

            <p class="other-info">2 followers</p>
        </div>

        <div class="info">
            <div class="info-inner">
                <div class="interactions">
                    <a class="btn" href="#">Add Friend</a> <a class="btn"
                    href="#">Follow</a>
                </div>
            </div>
        </div>
    </div>
</div>
        

Just some basic html elements structured to create the hovercard.

JavaScript Code

$(function() {
    $('#my-tooltip').tooltipster({
        interactive: true,
        content: 'Loading...',
        contentCloning: false,
        contentAsHTML: true,
        animation: 'fade',
        functionBefore: function(origin, continueTooltip) {
            // we'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data.
            continueTooltip();
            origin.tooltipster('content', '<div class="hovercard"> <div> <div class="display-pic"> <div class="cover-photo"> <div class="display-pic-gradient"></div><img src="dp.jpg"> </div><div class="profile-pic"> <div class="pic"> <img src="avatar.jpg" title="Profile Image"> </div><div class="details"> <ul class="details-list"> <li class="details-list-item"> <p> <span class="glyph glyph-home"></span> <span> Also Lives in <a href="#">Chennai</a> <a href="#">TamilNadu</a></span> </p></li><li class="details-list-item"> <p> <span class="glyph glyph-work"></span> <span> Founder at <a href="#">CodeDodle</a></span> </p></li></ul> </div></div></div><div class="display-pic-gradient"></div><div class="title-container"> <a class="title" href="#" title="Visit Page">Tamil Selvan</a> <p class="other-info">2 followers</p></div><div class="info"> <div class="info-inner"> <div class="interactions"> <a href="#" class="btn">Add Friend</a> <a href="#" class="btn">Follow</a> </div></div></div></div></div>');
        }
    });
});
        

Visit the tooltipster website to view the Tooltipster API provided. Following are the important API which are used to implement this feature,

  • interactive - This is set so that it doesn’t hide when the cursor is on the hovercard.
  • content - Initial content to be shown before loading the data. In this case the data is hardcoded, so the response will be spontaneous.
  • contentAsHTML - Weather to treat the content as HTML or just plain text. In our case the passed content is HTML.
  • functionBefore - A callback function that will be used to fetch the data from the server. Here it is just the hardcoded text.

CSS Code

/**
 * Author     : Tamil Selvan K
 * Website    : http://codedodle.com
 */

a {
    color: #3B5998;
    cursor: pointer;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.hovercard {
    width: 370px;
    height: 239px;
    border: 0;
    position: relative;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 10px rgba(0, 0, 0, .35);
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 10px rgba(0, 0, 0, .35);
}

/** Cover picture styles */

.display-pic {
    height: 137px;
    background-color: #0080CC;
    position: relative;
}

.display-pic-gradient {
    height: 97px;
    position: absolute;
    top: 43;
    width: 100%;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(38,38,38,0.40) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(38,38,38,0.40))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(38,38,38,0.40) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(38,38,38,0.40) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(38,38,38,0.40) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(38,38,38,0.40) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#8c262626',GradientType=0 ); /* IE6-9 */
}

.cover-photo {
    height: 140px;
    overflow: hidden;
}

.profile-pic {
    position: absolute;
    width: 350px;
    height: 100px;
    left: 10px;
    top: 85px;
    z-index: 1;
}

.pic {
    border: 1px solid rgba(0, 0, 0, .3);
    width: 100px;
    height: 100px;
    border-radius: 3px;
    padding: 3px;
    background-color: white;
}

.title-container {
    margin: -40px 0 0 140px;
    position: absolute;
}

.title-container a {
    color: #ffffff;
    font-size: 12px;
    font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-decoration: underline;
}

.other-info {
    color: #fff;
    font-size: 12px;
    margin: 0;
}

/** Hover card info and interaction */

.info {
    height: 37px;
    width: 100%;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-bottom: none;
    border-left: none;
    border-right: none;
    position: absolute;
    top: 200px;
}

.info-inner {
    padding: 9px;
    margin-left: 120px;
}

.info-inner a {
    text-decoration: none;
}

.interactions {
    float: right;
}

/** Person/Page info styles */

.details {
    margin-top: -60px;
    margin-left: 90px;
    font-size: 11px;
}

.details-list {
    list-style-type: none;
    color: #333;
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}

.details-list-sub-item {
    color: #9197a3;
}

/** Hovercard utils */

.glyph {
    background-repeat: no-repeat;
    background-image: url('spirit.png');
    background-size: auto;
    display: inline-block;
    height: 16px;
    width: 16px;
}

.glyph-home {
    background-position-y: 0px;
}

.glyph-edu {
    background-position-y: -15px;
}

.glyph-loc {
    background-position-y: -34px;
}

.glyph-work {
    background-position-y: -50px;
}

.btn {
    background: #f6f7f8;
    border: 1px solid #c6c7ca;
    color: #747474;
    font-size: 12px;
    font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
    font-weight: bold;
    padding: 6px 8px;
    text-align: center;
    text-decoration: initial;
    vertical-align: middle;
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-sizing: content-box;
    -webkit-font-smoothing: antialiased;
}

/* for demo */

#global-container {
    width: 800px;
    height: 400px;
    margin: 30px auto;
    background-color: #E0E8FF;
    border: 1px solid lightgrey;
    border-radius: 3px;
    padding: 10px;
    text-align: center;
}
        

The above CSS code styles the components of the hovercard. It implements some basic CSS styles and Image Sprite.

In future post, this will be implemented with real data from server side.