jQuery Tutorial: Build Hovercards for your Website

jQuery Tutorial: Build Hovercards for your Website

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 behavioral purpose and rest with CSS.

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

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.

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

Here is the JSON file data used in above code

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



Add Comment Register



Got Something To Say:

Your email address will not be published. Required fields are marked *


*