Tooltips

A common requirement in modern web applications is to show tooltips or mouseover hints to users to help them fill in a form more accurately. Simple tooltips using plain text can be created in HTML using the title attribute (available on images and links). But this approach doesn't allow us to use further mark-up, perhaps to show images or make use of internationalised text.

Some Ajax libraries go some way to addressing this problem, by placing the tooltip into a div element, and then using event handlers and JavaScript to make it visible at the right time. The problem with this is that although functionality is improved in comparison to HTML, the result is forms that are non-portable and non-accessible: they are non-portable, because not only are they dependent on script, but they are dependent on a particular script library; they are non-accessible because a voice browser would have no idea what to do with the div.

XForms provides powerful tooltip features by learning from both the HTML and the Ajax library techniques. XForms uses nice clean mark-up that hides any implementation details, just like the HTML title approach, but it uses an element rather than an attribute so that we can include other mark-up. The element is called hint, and can be used on any form control.