jQuery Tutorial: Build Hovercards for your Website

Hello Friends! How you guy are doing! Hope all of you are fine. Today I am gonna discuss about the the custom hovercards for your website and web applications. This hovercard creation guide will use the jQuery for behavioural purpose and rest with CSS.

Initially let’s define the markup and the events on which our custom hovercard should show up.

<span rel='hovercard' data-url='page_100000001'>
    Time to Hack
</span> 
<span rel='hovercard' data-url='user_100000000'>
    Pankaj Patel
</span>

Now this is the markup for the experiment. Here, the rel=’hovercard’ is used to identify and bind the target elements of custom hovercard. And the data-url attribute contains the essential info for the request of hovercard data. This data attribute is having value like user_100000000; this only represents the data that the hovercard for the user with userid 100000000 is requested.

Now let’s have a little amount of necessary CSS to make a pretty look of hovercard.

.hovercard {
	display: none;
	position: absolute;
	width:300px;
        padding:3px;
	height: 150px;
	border:1px solid #aaa;
	border-radius: 3px;
	background-color: #fff;
	-webkit-box-shadow:  rgba(0, 0, 0, 0.4) 0px 3px 4px;
-moz-box-shadow:  rgba(0, 0, 0, 0.4) 0px 3px 4px;
box-shadow:  rgba(0, 0, 0, 0.4) 0px 3px 4px;
}
.hovercard:before {
   content: "";
   position: absolute;
   bottom: 100%;
   left: 20px;
   border-bottom: 20px solid black;
   border-bottom-color: inherit; 
   border-left: 20px solid transparent;
   border-right: 20px solid transparent; 
}
.hovercard h3{
	font-family: Verdana, Georgia;
	border-bottom: 1px dashed #ccc;
}
.hovercard a{
	text-decoration: none;
	cursor: pointer;
	border-bottom: 1px dashed #eee;
}

Alright that was enough of necessary codes. Now the working JS to take the little app to the working stage at the client side

First we inclide jQuery in our page:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>

Then we add the JS needed to fetch the card data and show it:

$(document).ready(function (e) {
  $('span[rel="hovercard"]').hover(
    function(e){
      position = $(this).position();
      x = $(this).data('url');
      $.getJSON('hover_data.json', function (data) {
        $('.hovercard').html('<h3>'+eval('data.'+x+'.full_name')+'</h3>Place : '+eval('data.'+x+'.place')+'<br/><a href="'+eval('data.'+x+'.facebook')+'">'+eval('data.'+x+'.facebook')+'</a>')
      })
      $('.hovercard').show().css('top', position.bottom).css('left', position.left);
      //Mouse In code
    },
    function(e){
      $('.hovercard').hide();
      //Mouse Out code
      $('hovercard').html('');
    });
});

Here is the JSON file data used in above code

{
  "user_100000000": {
    "full_name": "Pankaj Patel",
    "place": "Indore",
    "facebook": "http://www.facebook.com/pankajpatel001"
  },
  "page_100000001": {
    "full_name": "Time to Hack",
    "place": "Internet",
    "facebook": "http://www.facebook.com/time2hack"
  }
}

The above code is sample data. Now you can just craft your server side language code to produce this type of JSON based on the ‘data-url’ attribute of the hover elements.

So thats it for Now. Have fun and play with this and Please let me know your response about the post and your experiment using this post in the comments.

Demo  Download