Useful jQuery Contextual Help Plugin For Form - FormHelp

File Size: 150 KB
Views Total: 2471
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Useful jQuery Contextual Help Plugin For Form - FormHelp

FormHelp is a small yet useful jQuery plugin that provides contextual help on input fields in a standard html form.

There are 2 ways for the helpbox to show up. First, for text/number inputs like text/password/email etc. the box shows up when the focus event is triggered on the element. Second, for inputs like buttons and inputs whose values are changed when clicked, the helpbox shows up when the mouseover event is triggered on the element.

How to use it:

1. Load the jQuery library and jquery.formhelp.min.js on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.formhelp.min.js"></script>

2. Include required jQuery FormHelp stylesheet to style your plugin

<link rel="stylesheet" href="jquery.formhelp.css">

3. The html

<input id="input-date" type="date"/>
<span class="helptext" data-for="#input-date"> Enter a date between the past and the future. </span>

4. Just call the plugin and you're done

$(document).ready(function(){
   $.formHelp();
});

Change log:

v0.1.6 (2014-05-18)

  • The helpboxes are now childs of the body element
  •  Using backslashes in data-for attribute of span elements is now OK

v0.1.4 (2013-10-22)

  • Added a pushpin in the helpbox

v0.1.1 (2013-09-30)

  • Added class prefix option

 


This awesome jQuery plugin is developed by invetek. For more Advanced Usages, please check the demo page or visit the official website.