Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple jQuery plugin used to display contextual help
/**
* jQuery helpBox plugin v0.1
* ==========================
*
* http://www.dhar.fr
*
* Provides a simple way to add contextual help in your page.
* @author Olivier Audard - audard[AT]gmail[DOT]com
*
* Usage:
* $('.helpdiv').helpBox({
* helpContent:'<p>help content</p>', // jQuery Selector or plain text HTML.
* contentCls:'help-content', // CSS Class applied to the help box.
* buttonCls:'help-button', // CSS Class applied to the help button.
* buttonText:'Help' // Help Button text
* });
*/
(function($){
$.fn.extend({
helpBox: function(options) {
var defaults = {
helpContent:'<p>help content</p>', // jQuery Selector or plain text HTML.
contentCls:'help-content', // CSS Class applied to the help box.
buttonCls:'help-button', // CSS Class applied to the help button.
buttonText:'Help' // Help Button text
}
var options = $.extend(defaults, options);
return this.each( function() {
var o = options
// Gets help content
var content = ( $(o.helpContent).size() > 0 ) ? $(o.helpContent).html() : o.helpContent;
// Appends help box and help button
$(this).append("<div class='"+o.contentCls+"'>" + content + "</div>")
.append("<div class='"+o.buttonCls+"'><a href='javascript:void(0)'>"+o.buttonText+"</a></div>");
$(this).find('.'+o.contentCls).hide();
// Open the box on button mouseover, close it on click
$(this).find('.'+o.buttonCls+' a').mouseover( function() {
$(this).parent().prev('.'+o.contentCls+':hidden').slideDown();
}).click( function() {
$(this).parent().prev('.'+o.contentCls+':visible').slideUp();
});
})
}
})
})(jQuery)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment