Book Image

MooTools 1.2 Beginner's Guide

Book Image

MooTools 1.2 Beginner's Guide

Overview of this book

MooTools is a simple-to-use JavaScript library, ideal for people with basic JavaScript skills who want to elevate their web applications to a superior level. If you're a newcomer to MooTools looking to build dynamic, rich, and user-interactive web site applications this beginner's guide with its easy-to-follow step-by-step instructions is all you need to rapidly get to grips with MooTools.
Table of Contents (14 chapters)
MooTools 1.2 Beginner's Guide
Credits
About the Authors
About the Reviewer
Preface

Time for action—adding tooltips to the web form


We'll use the same web form as before, but we'll modify it to provide a hover over tooltip for users. This can be used to provide more explanation for a particular field. Although the example we're using is pretty straightforward, there are some web forms that have labels that could use a little tooltip help to clarify to the users what they need to enter.

  1. First, we have to modify our HTML. We'll add<span> tags with the text (?), which when the user hovers over them, will display a relevant tooltip/information box beside our web form. We give each of these span tags a unique ID so that we can tell MooTools which help text to display. The tooltip/information box is a div with the ID of feedback.

    <form action="" method="get">
    <p><label for="Name">Name: <span class="help" id="hName">(?) </span></label><input name="Name" type="text" /></p>
    <p><label for="Email">Email: <span class...