Learning jQuery

Hovercard is a free light weight jQuery plugin that enables you to display related information with the hovered label, link, or any html element of your choice.

What is so cool about this plugin!

• Smoothly fades the name into a hovered card (in place).
• Uses minimum css and no external stylesheets to download.
• Full control over html to be displayed.
• Comes with built in Twitter and Facebook hovercard.
• Supports callback functions on hover in and hover out.
• New! Auto adjust on the edges of viewport
• Built in Twitter and Facebook Hovercard

How to use it?

Following is a very basic example of how to use hovercard.

$('#demo-basic').hovercard({
    detailsHTML: $('#hiddenDiv').html()
});?

See result below.

Plugin Options

• width default value 300. Width in px for the hovercard i.e. 400, or 400px.

• openOnLeft default value false. By default hovercard tries to expand towards right. And If there isn't enough available viewport on right, the plugin adjusts itself to open on left. Set 'openOnLeft' to true if want the hovercard to always open on left.

• openOnTop default value false. By default hovercard tries to expand towards bottom. And If there isn't enough available viewport on below, the plugin adjusts itself to open on top. Set 'openOnTop' to true if want the hovercard to always open on top.

• cardImgSrc default value ''. The hovercard has an optional placeholder for one default image with a width of 70px. This image is positioned on top right for hovercard opening on right, and top left for hovercard opening on left.

• detailsHTML default value ''. You can write any html markup (with your classes or ids) for your hovercard details. Or even a simple string would do! There will be no styles added by the plugin to this section of html. This gives you the flexibility to use the hovercard for anything you want. Make it an in place editor, use ajax, show tweets, flicker images etc.

• background default value '#ffffff'Background for your hovercard. You can use the css shorthand notation for setting backgroundsi.e. background: #CCCCCC; or background: transparent url('your-background-image.jpg') no-repeat 0 0 scroll;

• onHoverIn default value function () { }.Callback function when you hover in over the label (or any element) you are using hovercard for.

• onHoverOut default value function () { }.Callback function when you are hovered out from the hovercard. 

Feel free to contact me for any help related to jQuery, I will gladly help you.