jQuery plugin for creating nice hovercards

This is a neat jQuery plugin! Hovercard is free, light weight, runs on jQuery and enables you to display related information with the hovered label, link or any other HTML element that you want. Why is this plugin so cool? Well, it smoothly fades the name into a hovered card (in place), uses minimum CSS and no external CSS, you have full control of the HTML to be displayed, comes with built in Twitter and Facebook hovercards and also supports callback functions on hover in and hover out.

You also can hover from inside a hover or include a PDF inside your hovercard! The plugin provides a series of neat options like width of the hovercard, if you want to display it on the left or on the right, the hovercard background or the functions you want to trigger on hoverIn and hoverOut. There is also a nice tutorial on how to use this plugin with WordPress that can be found here

Implementing this hovercard plugin is very easy and supports all modern web browsers (check the example bellow on how to use).

$(document).ready(function () {
    var hoverHTMLDemoBasic = '

' + 'John Resig is an application developer at Khan Academy. He was a ' + 'JavaScript tool developer for the Mozilla Corporation. He is also the' + 'creator and lead developer of the jQuery JavaScript library.

'; $("#demo-basic").hovercard({ detailsHTML: hoverHTMLDemoBasic, width: 400, cardImgSrc: 'http://ejohn.org/files/short.sm.jpg' }); });

jQuery plugin for creating nice hovercards: Example

jQuery plugin for creating nice hovercards

Download Hovercard.js Hovercard Demo

Related Posts

jQuery pagination plugin – tradpaginator

HorizontalNav : jQuery plugin that spans a horizontal navigation

Make content sticky on scroll to a point

jQuery plugin to organize content in a responsive layout

Leave a Reply