One of my favorites has to be Tooltipster, a free jQuery plugin for creating custom tooltips. The plugin runs on top of jQuery and works in all browsers back to IE8.
Check out the homepage for some live demos and how they work on individual elements. You can add static text, images, or other types of content into the tooltip. Plus you can change how the tip appears based on hover, click, or any other callback method.
Truthfully this is one of the easiest tooltip libraries for customization. The docs are easy to read and once you get the hang of this plugin it may become your favorite go-to solution.
On a slightly different subject let’s cover the use of progress indicators. These are fairly common with checkout fields but haven’t been used in traditional web forms. Progression.js is a free progress tooltip plugin made for any type of form.
When the user successfully fills in a field the progress indicator increases. It’ll automatically reach completion once every required field has been filled. This is very cool and often works best on larger forms to keep people pushing through to the end.
The prevalence of HTML5 placeholder text has almost removed the need for labels. However they still serve a purpose in regards to compatibility and when fields have already been filled.
Enter Floatlabel.js with its sly animations and ridiculously simple config. A field’s label is seen as a placeholder when empty. After some text has been entered it’ll float above the field and remain present the whole time. This helps users remember what they’re filling out and gives the form a sense of life.
Nod.js comes with icons and custom styles for showing when a field is complete or incomplete. It plays nice with Bootstrap and even offers custom functions to check against more complicated valid/invalid text.
For a more expansive tooltip library I’d have to recommend Tipped.js. It runs off jQuery and includes a JS/CSS file together. Once installed you can build tooltips with custom skins, unique placements, animations, and callbacks.
Tipped offers custom methods just like other plugins. You have access to an array of unique options and callbacks made for tooltips. It’s easy to pull data from Ajax/JSON or Ajax/MySQL, even API data can be loaded from a 3rd party server.
If you need a complete tooltip solution then look no further. Once jQuery is installed you’re good to go.
Not everyone requires a full-scale solution and many developers would rather stick to a simple plugin. Smallipop runs on jQuery and has the easiest setup you could imagine. Just target the element with .smallipop() and you’re all set.
Although this doesn’t exactly fit with form tooltips, it does fall under the umbrella of “form hints”. DateTextEntry is a free jQuery plugin made for enhancing date fields. Instead of a typical blank input users are given the more familiar DD/MM/YYYY alternative.
I will admit the plugin website is rather basic and documentation is not too pretty. But it’s also not a complicated plugin and you can learn a lot by downloading the live demo. I know most devs go with calendar pickers but text-based dates are a reasonable alternative.
Help wizards, completion steps, and breadcrumbs all make up the guided process of form submission. jQuery Steps is a compact library for guiding users through the signup process.
It’s actually quite comprehensive with a lot of interesting features. Take a look at the examples page to see how this works in action. Steps can be guided with field completion or key presses on the keyboard.
Everything is guided through tabs and works like a dynamic switching field. I don’t think this is appropriate for every project, but since it’s easy to customize it can work on forms that require large handfuls of data.
The simplest way to mark required fields is with an asterisk. Unfortunately this is rather static and forces users to recognize when a field is required. dependsOn is a jQuery plugin for managing required fields.
Based on the demo examples you can actually build a number of interesting features. In one example the submit button is hidden from view until enough fields are completed. I’m sure many developers are familiar with this type of functionality and have even written something like this from scratch.
But this plugin will save you a lot of time and stress debugging your own handwritten plugin.
Multi-Step Progress Bar
What drew me in was the animation style of this effect. It makes the whole form come to life in a very unique way. Anyone who likes breadcrumb steps in form design will fawn over the elegance of this code.
Keep in mind that this does require jQuery as a dependency so you’ll need to include the library in your project. But it’s also easy to customize and repackage into a new plugin.
With all of these free plugins at your disposal you should have no problem building custom forms. Study other examples online and take down notes when you see a cool effect. It’s not as hard as you think to create beautiful forms – all it takes is knowledge of user behavior and some nifty plugins on your side.
Useful plugins. Thanks a bunch!
Good tools and plugins 🙂 Thanks for the share http://www.sharkweb.com.sg/
Great list. I will definitely be adding some of these to our armoury!
A good comprehensive list. For those looking for SaaS tooltips, I recommend you check out Appcues.com