title (HTML attribute)
Example
The abbr and
acronym elements use the title
attribute to provide the full wording for the abbreviation (it is a
required attribute for these elements):
<div>The <abbr title=“Americans with Disabilities Act”>ADA</abbr> is there for your protection.</div> <div>This pub is rated highly by <acronym title=”Campaign for Real Ale”>CAMRA</acronym>.</div>
A
link may include a title attribute which may offer
extra help to a user (and may even be enhanced/made more obvious using a
JavaScript technique):
<a href=“minutes.html” title=”Minutes cover topics discussed, including refuse collection, housing taxes and social care policies”>June meeting minutes</a>
Description
The title attribute allows the
developer/page author to provide extra information about any element on a
page. Typically, this is rendered as a ‘tooltip’ which appears when the
user hovers the mouse pointer over the element that the
title is applied to. It is most often used for the
a element (to provide
additional information about the link destination), within form elements
(perhaps to offer tips about the format that data is preferred in, for
example date formats) and is a required attribute for the abbr and acronym elements as it is
used to provide the expanded version of the abbreviations contained in
those elements.
Because of the way that browsers have traditionally
rendered title content - in a tooltip that appears
as you hover over the element in question - many developers have used it
as a ‘space-saving mechanism’, a way to provide help without necessarily
cluttering up the page with extra wording, making it something that can be
found if someone pauses for thought while over a given element. This is
not a good technique for several reasons, namely:
- Not everyone uses a mouse, and most browsers do not render the tooltip content if the user has tabbed to that element with the keyboard.
- The tooltip content does not appear for very long in all browsers - it times out after a short while, potentially not allowing the user to read it properly (Opera is the exception to this rule).
- The tooltip content is often truncated, so it may not be possible to convey all the information in the space afforded.
- Someone having difficulty with a section on a page may not have their mouse pointer hovering over that specific section and may not see the tooltip at all.
- Because of the nature of the tooltip, it is not possible for the
user to print out any content contained inside the
title, nor is there any way of copying and pasting that text anywhere.
As such, the title attribute should be
considered as one that may be used to offer additional information but
should not be relied upon. If you have key information to present
to the user, it should be written directly in to the document for all to
see and not rely on the browser to display it on the fly.
Value
Any value can appear in this attribute, but given the foibles of how browsers will present this information (not for long, and possibly truncated), it’s good practice to keep the information provided short and to the point so as to give yourself a fighting chance of having it read by the user.Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Every browser listed supports this attribute.
User-contributed notes
- ID:
- #3
- Date:
- Mon, 31 Mar 2008 07:24:24 GMT
Setting title="" is a useful trick to prevent IE from displaying the ALT attribute of an image as a tool-tip.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

