Verizon cell phones

Implementing Tooltips In Forms

HTML Learn how to build tool tips into your custom HTML forms.

When it comes to website forms, a lot can be done to make them more easier to use and understood. Often times when I visit a website, I see a canned form being put up with not much thought put into it.

Users who are not web savvy struggle with forms because there are no instructions to guide them through the process. We are going to change that today by placing tool tips in the form fields to make it easier. You will find that after you integrate this into your design, that its a piece of cake.

Tools Needed

Before we start, you will need to download two libraries:

  1. jQuery

    Choose the jQuery production source that is minimized to cut down on download time.

  2. jQuery Tools

    One of the most useful tools in my toolbox is Flowplayer's jQuery tools. This is a complete library full of sliders, overlays tooltips, and other very useful stuff that can make a website shine. Download the full library here

A Contact Form Project

Now that we have downloaded our libraries, we'll start our work on a small project. Let's build the user interface for a contact form.

This is the form we will be creating:

Contact Form

Our goals will be:

  1. Use HTML 5 markup
  2. CSS3 for rounded corners
  3. Provide tool tips whenever a user clicks in or hovers in input and textarea widgets

The HTML 5 Markup

We start off our project by marking up our page with a HTML 5 doctype. The document is housed in a page container that is prettied up with CSS by centering the page and leaving some margin in the top and bottom. The form structure is basic but there is one important thing to note. Notice that I use a title attribute for the input and textarea elements.

These strings will be our tooltips.

<!doctype html>
<head><title>Contact Us</title></head>
<body>
  <div id='page'>
    <h2>Contact Us</h2>
    <p>Have suggestions, questions, complaints? Feel free to contact us.</p>
    <form id='frmContact' action='#'>
      <ul>
        <li><label>Name</label><input id='name' type="text" title='Type your full name'/></li>
        <li><label>Email</label><input id='email' type="text" title='Type your email address'/></li>
        <li><label>Message</label><textarea id='message' title='Type in your message'></textarea></li>
        <li><input type='submit' id='btnSubmit' value='submit'/></li>
      </ul>
    </form>
  </div>
</body>
</html>

Add the jQuery and jQuery Tool library files

Next, we add in our html header, the two javascript libraries. Also included is a jQuery function that is triggered after the document has been loaded. In this case, we tell jQuery to create a tooltip just to the right of our input boxes.

The CSS3 markup

Finally, we create a stylized form that looks polished. We set the widths of all the input boxes so that they line up and look good. The form and the pages have cool CSS3 rounded corners. You will be be able to see this in current browsers such as IE 9, Firefox 8, Opera 11.5 and Google Chrome 16.0.

For the form, I use an unordered list to contain the labels and input boxes. The labels will appear stacked on top of the input fields. You could also use a table too and change the look and feel by having the labels on the left hand side of the input boxes.

Filed under: