Pretty Inputs: Help Users Enter the Right Data with jQuery

By Mark Cipolla

Entering data in large fields can be a UX nightmare; it can be a challenge to make it simple for users to enter their data. How do they know what to enter? Can you really explain what they are meant to enter in just a input label?

We had the same problem to deal with on a project I was recently involved in. Users could enter a title of an article (in this case), and although it was required—the form wouldn’t submit unless content had been entered into the Title field—we wanted to reassure users that they could always change the title later. Also, we wanted to give some helpful tips and provide examples of good titles. So we figured that having friendly, helpful tooltips that would display if they were needed, but wouldn’t get in the way, were the way to go.

The HTML for the tooltips is quite easy. The class of helpToolTipSubject is used to set up the jQuery actions. The

contains both the question mark (the text that appears on the button) and the tooltip’s contents. The

gives you the CSS hook for adding the point at the bottom of the tooltip. The code for it is below.

<input class="helpToolTipSubject" type="text" name="name" id="name" value="Pretty, huh?"></input>
<div class="helpToolTipTrigger">?
<div class="tooltip">
<!-- The tooltip content goes here -->
<p>You can add a really helpful tooltip giving your users hints about what they need to enter into the input field.</p>
<!-- This is for the point -->
<div class="point"></div>
</div>
</div>

The idea that we could provide some help where the user needs it, but without it getting in the user’s way, suited our needs well. We used the tooltips to show hints that, once they’d been read, didn’t really have to be seen again (unless the user felt they needed a reminder).

The JavaScript therefore has to find all the tooltip triggers (via the CSS classes we’ve added), bind a click event to the button, and know when the button gets clicked, it can open the the tooltip, add an overlay (to cover everything else on the page and wait for clicks), and be ready to hide the tooltip and overlay if there’s another click.

To check out the JavaScript (which is a little complex, but I’ve gone through and commented it rather thoroughly) and the CSS, view the source of this example.

Editor's Choice, tutorial

Meet the author

Mark Cipolla

Mark Cipolla is a web guy at heart; front-end design and coding (with xhtml/html5/css with a touch of javascript) meets programming (Ruby on Rails and a touch of PHP).

Tatsh

I think a decent way to help is by making input elements manually (ones that are not actually ). This way you get to have total control over the look of the element. HTML5 will bring a lot of common elements. We obviously still want to perform validation and sanitation on any form inputs but if someone doesn’t have to enter a date and instead clicks a date on a calendar instead of typing in a date that makes a lot more sense and is much more common in any modern OS.

The other thing is elements like don’t allow very easy styling/event handling. I find it far easier to make a fake select element (just a set of images and text) then set a hidden field’s value for submission.
- brothercake
  
  It’s like the standards revolution never happened! Happy 2001
Graham

Its not a bad effect but is there really any need to require jQuery (a min. 30K download) for a simple tooltip? You could achieve a very similar result with pure CSS – make the ‘trigger’ element an anchor, absolutely position a hidden inner element containing your tooltip text, then just use the :hover pseudo-class to reveal the tooltip on mouseover. No JavaScript, less markup, fewer clicks for the user.

I’m not trying to be mean – I just think that using jQuery for this stuff is like cracking a nut with a sledgehammer.
- markcipolla
  
  I haven’t had a single project in a long, long while where I haven’t included jQuery… Everything I’ve worked on has had some moderately fancy jQuery going on, so it’s never been something I’ve had to consider.
  
  I agree, however. To include jQuery just for this would be overkill.
Tatsh

What should be used is jQuery UI. Simplifies this whole thing.
- markcipolla
  
  Quite possibly, but I’ve never liked jQuery UI. The only thing I’ve used properly in jQuery UI is the animate() methods…
  
  I’ve always considered jQuery UI yo be way too bloated, and just not hugely useful.
Brian

I like this but I suppose I would do it differently. I would add a title to the input with my explanatory text then my jquery would remove that and add the necessary elements to do the above. i.e. thinking about how it will look and behave without javascript then layering the scripted behaviour on top.
- John Woodcock
  
  I was thinking the same thing. I don’t want my clients or content producers to have to worry about adding all the extras.
Thomas Riis

I think it’s a cool sample – It could also be used as an error messagebox for form validation. However I whould use a more sharp colour.

I always use jQuery for validation, galleries, and stuff like that – and JQuery is a good companion when doing Ajax stuff.

By the way I think designfestival looks promising ; )
Spanish Villa

Why use more slow loading JS instead of CSS for this?