HTML 5 Tooltip

Mastering HTML5 - Part 2

Forward: In this part of the series, we see how to create HTML 5 tooltips.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 2 of my series, Mastering HTML5. I assume you have read the previous parts of the series before reaching here. In this part of the series, we see how to create HTML 5 tooltips. A tooltip is a hint as text that throws more light on an HTML element.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

The alt Attribute
The alt attribute is a tooltip for the image. The following code shows how to use it.

    <img src="imageURL" alt="Short text saying what the image is.">

With the image alt attribute, if the image is not displayed for whatever reason, the value of the alt attribute will appear in the position of the image.

Note: Everything being equal, you see the value of the alt attribute when the mouse pointer goes over the image.

The title Attribute
The title attribute can be used for most HTML elements. It is a tooltip. Here is a quotation from the HTML 5 specification draft about the title element: The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; and so forth.

The value of the attribute is text.

An illustration of the use of the title attribute is:

    <a href= "url" title= "Explanation of topic">Topic</a>

Note: Everything being equal, you see the value of the title attribute when the mouse pointer goes over the element.

The placeholder Attribute
The placeholder attribute is not really a tooltip. However, it is also a hint. It is used with the input element. The following code shows how to use it:

    <input type="text" name="fullname" placeholder="John Smith">

Note how the placeholder has been used here for an input element that is expecting any full name. The value of the placeholder attribute is “John Smith”. This value will appear faintly in the input field at the browser, indicating to the user that he should type something similar. As soon as the user starts typing his full name (clicks into the input field), the value (John Smith) of the placeholder would be automatically erased and the user will continue and type his full name.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

HTML 5 Tooltip

Mastering HTML5 - Part 2

Introduction

Related Links

Comments