Categories:

Creating tooltips using the title attribute of HTML

Images have long supported the "alt" attribute, which displays a textual tooltip when the mouse moves over it.

<img src="monster" alt="Big scary monster">

Big scary monster

That's fine, and even great, but why should images get all the glory? Shouldn't other elements inside the document be able to carry a tooltip as well, such as a text link or form element? Wouldn't that be pretty cool, not be mention crucial in guiding devises with limited capabilities such as PDAs navigate your site and its various elements? Well, starting in HTML 4, the concept of the "alt" attribute for images have been expanded to all elements on the page.

The title attribute

Here's the idea: HTML 4 supports a "title" attribute that can be inserted inside any HTML tag. Inserting this attribute effectively gives the element a tooltip that pops up when the mouse moves over it. Are you prepared to give a text link a tooltip? Here goes:

<a href="http://www.dynamicdrive.com" title="Free DHTML and JavaScripts">Dynamic Drive</a>

Dynamic Drive

The title attribute is supported in all modern web browsers, and can be applied to virtually any element that falls under the <body> tag. Let's see a couple of more examples:

<form>
<input type="text" size=25 title="Enter your email address here">
<input type="button" value="Submit">
</form>

JavaScript Kit

<div title="JavaScript Kit">JavaScript Kit</div>

Scripting the title attribute

For most of you, simply knowing how to use the title attribute is probably good enough, but just in case you need to, JavaScript does provide a way for you to access the title attribute programmatically (in your scripts), and change its value dynamically. This is possible through a property of all HTML elements named "title" (appropriately enough) that contains the text inside the title attribute, and is read/write.

A script is worth a thousand words, so I first illustrate, then explain:

<b id="text1" title="A bold text">Hello my friends!</a>

<script type="text/javascript">
document.getElementById(text1).title="New tooltip"
</script>

The next question is figuring out when you'll actually want to use JavaScript to manipulate the title attribute!