2011

Using the JQuery Tooltip plugin to enhance title attributes

Posted By : Shaun McCran
Related Categories: JQuery, RIA

The title tag attribute is a modern staple of any developers html code base. Most of us use them, more of us should use them more. I've learnt more recently that they have wider implications for Accessibility users, but I've also come to change my thinking of their use.

This article shows how you can use the JQuery tooltip plugin to enhance the title attribute, and how the title tag can be used to convey a more useful message to your browsers.

Web browsers have always displayed the title attributes text as a small pop up, in a bespoke way for that specific browser. Internet Explorer and Firefox will show the title attribute in totally different style from each other, by applying the tooltip plugin every user, no matter what their browser, will have the same experience.

The title tag is a staple of Accessible development, allowing developers to give more descriptive instructions to screen readers and text browsers. Rather than just using it for this purpose why not use it to provide a richer experience to all users?

Treating the title attribute as a sort of inline help tool can enable people to successfully navigate around your site, and it is an easy and unobtrusive way of providing additional information to people.

You can download the JQuery tooltip plugin from this site: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

The code below has a selector that turns any hyperlink or image element's title attribute into a pop up element.

view plain print about

1<s/cript type="text/javascript">
2$(document).ready(function(){
3    // tool tip function for inline help, just give it a title as well
4    $('a, img').tooltip({
5        track: true,
6        delay: 0,
7        showURL: false,
8        showBody: " - ",
9        fade: 250
10    });
11});
12</script>

You can add this to any element you want, I've found it effective within forms, where giving additional user guidance has increased the form usability.

The next bit of code shows how you can style the tooltip pop up in any way you want using CSS.

view plain print about

1<style>
2#tooltip {
3position: absolute;
4z-index: 3000;
5border: 1px solid #111;
6-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
7-moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;
8-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
9-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-radius: 5px;
10background-color: #eee;
11padding: 5px;
12opacity: 0.85;
13}
14</style>
15
16<a href="##" class="inline-help" title="This is a link tooltip">Link</a>
17<p></p>
18<img src="BeachBall.jpg" class="inline-help" title="This is a an image tooltip">

It will provide a richer experience to your users, but it also degrades nicely as all browsers will still inherently handle the title tag.

There is an example of this working here: JQuery tooltip plugin demo