KeyTips jQuery Plugin Example

This page shows an example of using the KeyTips jQuery plugin with a typical form.

Hold down the Alt key to see the access keys on this form highlighted.

To use the plugin on a page simply:

  1. Add a reference to jquery-1.4.4.js

    <script type="text/javascript" src="script/jquery-1.4.4.js"></script>

  2. Add a reference to jquery.KeyTips.js

    <script type="text/javascript" src="script/jquery.KeyTips.js"></script>

  3. Add a link to KeyTips.css in the head

    <link type="text/css" rel="stylesheet" href="style/KeyTips.css" />

  4. Copy the popup-back.gif image to the same folder as the KeyTips.css stylesheet
  5. Add a call to $.keyTips() in your page's onload script

    $(function() { $.keyTips(); });

Personal Details
Contact Details
Home Address
Test Fields
  1. There two hidden fields following this who's access keys should not be displayed

This is a required field
indicates a required field