Pretty Inputs: Help Users Enter the Right Data with jQuery

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.