jQuery ContentHover Plugin

Show hidden content on top of element on mouseover using jQuery

ContentHover is a small jQuery plugin that helps you show some hidden content on top of an element when the mouse hovers over it. There are options to chose how your hover effect would appear, like fade in or slide in from any direction, you can change the opacity of the overlay etc. (Check out the options below)

Demo: Check the demo
URL: http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/
Download: Download source (6KB) or the minified version (3KB)

data_selector: '.contenthover', // The selector for the element that will be the content of the overlay element to show on hover 
width: 0,                       // Set to 0 to let the plugin figure it out
height: 0,                      // Set to 0 to let the plugin figure it out
overlay_width: 0,               // The overlay element's width. Set to 0 to use the same as 'width'
overlay_height: 0,              // The overlay element's height. Set to 0 to use the same as 'height'
overlay_x_position: 'center',   // [center, left, right] The position of the overlay horizontally (if overlay_width is different from width)
overlay_y_position: 'bottom',   // [center, top, bottom] The position of the overlay vertically (if overlay_width is different from width)
overlay_background: '',         // The css background of the overlay element
overlay_opacity: 1,             // [0-1] The opacity of the overlay element
effect: 'fade',                 // [fade, slide, show] The effect to use
fade_speed: 400,                // Effect ducation for the 'fade' effect only
slide_speed: 400,               // Effect ducation for the 'slide' effect only
slide_direction: 'bottom',      // [top, bottom, right, left] From which direction should the overlay apear, for the slide effect only
zindex: 2,                      // The base z-index value
wrapper_class: 'ch_wrapper',    // CSS class to add to the wrapper
normal_class: 'ch_normal',      // CSS class to add to the 'normal' element
hover_class: 'ch_hover',        // CSS class to add to the 'hover' element
onshow: function(){},           // Callback function when the 'hover' element is shown
onhide: function(){}            // Callback function when the 'hover' element is hidden

Compatibility

It has been tested on the latest versions of Firefox, Chrome, IE and Opera and seems to work well. It also works on IE7, 8 and 9. It does not make use of any CSS3 transitions and effects, so the result should be similar on most browsers.