Tooltips and Titles

In addition to providing descriptive anchor text, it is sometimes helpful to provide additional context to explain links. This context can be particularly helpful when a link contains or consists of an image, icon, or another non-text element.

Additional context can be provided as text using the HTML title attribute. Although the title attribute can be provided to any HTML element, it is often extremely useful as additional context or advisory text for clickable elements.

Most browsers will display the text of a title attribute as a tooltip, meaning when a user hovers their cursor over an element, the text will appear in a small box near the cursor.

To add tooltips to a clickable element like a link, add it as the title attribute.

Mouse over the word “Codecademy” below to see this behavior in action!

Codecademy is the best place to learn to code!

NOTE: The title attribute is HTML’s built-in way of creating tooltips, but is known to cause a variety of accessibility issues. Developers have come up with a number of ways to create tooltips that are more accessible, but this generally requires using CSS and JavaScript, which fall out of the scope of this lesson. When creating tooltips in the wild, you should research ways to make them accessible for everyone.

Instructions

1.Let’s add some clarifying information to links via tooltips and the title attribute. In index.html, you can find three links within the text of the first question that read “running,” “swimming,” and “biking.” Add a title attribute to each of these links to describe them.