Use Keyboard Shortcuts to Create Tooltips for Forms using jQuery

Abstract: The following article demonstrates how to use keyboard shortcuts with jQuery to create tooltips for HTML forms.

Use Keyboard Shortcuts to Create Tooltips for Forms using jQuery

I’ve said this once and I’ll say it again, jQuery is cool. Something on the web that is very helpful to users when filling out HTML forms is for you, the developer, to give them help along the way. I thought it would be cool to use jQuery to show help tooltips when the user clicks on a combination of keys using their keyboard. This article will demonstrate how to capture keyboard events in JavaScript and display help tooltips.

Before we get started, this example uses the latest version of jQuery which is 1.3.2. That can be downloaded from here. The jQuery Tools and can be downloaded from here.

Open Visual Studio 2008 and choose File > New > Web > ASP.NET Web Application. Add the following HTML to the Default.aspx page:

<table>

<tr>

<td>

Given Name

</td>

<td>

<inputtype="text"maxlength="10"id="txtGivenName"/>

</td>

<td>

<divid="givenName"style="display:none;"title="G">

<imgsrc="info.png"alt="Info"width="16"height="16"/>

Please supply your given name</div>

</td>

</tr>

<tr>

<td>

Surname

</td>

<td>

<inputtype="text"maxlength="20"id="txtSurname"/>

</td>

<td>

<divid="surname"style="display:none;"title="S">

<imgsrc="info.png"alt="Info"width="16"height="16"/>

Please supply your surname. This can only be <b>20</b> characters long</div>

</td>

</tr>

</table>

The HTML above is quite simple. There’s a table which contains two text boxes. In the cell to the right of the text boxes there’s a <div> element which contains an image and some useful text if the user gets lost or in unsure of what value to put in the text box. To make a generic piece of JavaScript I’m going to use the title attribute in the <div> element. I’ll use that as the key to combine with the shift key. The next step is to add the following jQuery code to the <head> section of the page. Ideally JavaScript should go to a separate .js file, however for this example; I’ll keep it in the same page:

In the above code, I’m binding to the document’s keydown and keyup events. On the keydown event, I want to show the tooltip, and on keyup, hide it.

$(this).keydown(function(e)

$(this).keyup(function(e)

Both pieces of code get information about the event through the argument e. Because I only want this to work when the user holds down the shift key, I’m checking for that through the evt.shiftKey variable. This indicates whether the shift key was pressed when the event fired

var evt = e || window.event;

if (evt.shiftKey)

From there I have created a function called findHelp. The sender of the event is passed to this function. I grab either the keyCode or charCode value, and then use that in the jQuery Selector to find the related <div> element by its title attribute:

function findHelp(e) {

var key = (e.keyCode ? e.keyCode : e.charCode);

return $("div[title=" + String.fromCharCode(key) + "]");

}

Running this code now will display the simple form. If you hold down Shift + S or Shift + G it will show and hide the tooltip for each text box.

Before the keydown event and on the keyup event

During the keydown event

This is a nice addition for any website that wants to help their users fill out HTML forms. For more information on keyboard events you can go here for more reading. The entire source code of this article can be downloaded over here

Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan

User Feedback

Comment posted by
pete w
on Wednesday, November 4, 2009 9:38 AM

I like it! I've done something similar with the js-hotkeys plugin.
check out:
http://www.acceptedeclectic.com/2009/10/rapid-keyboard-friendly-grid-with.html
and
http://www.reallifedata.com/keyboardgrid/demo.html