Easy Tooltips

Probably the easiest way to implement hover text on a web page is by use of the HTML title attribute.

Here is an example.

I am here.

Hover over the word "here" in the above sentence. The text will pop up as a tooltip. Phones and tablets will need to tap on "here" because they don't have a mouse for hovering on anything.

Each browser implements the hover according to its independent programming. Generally, the tooltip will be below the mouse pointer.

Here is the code for the above example.

I am <span title="This article.">here</span>.

The above title attribute is in a span tag. The title attribute can be used in HTML tags that contain content, including a linking tags, img image tags, and p paragraph tags. The examples in this article all use the span tag.

Noticeability

Whether computer or phone, the user won't know a "title" tooltip is available unless it is explained or marked as such.

Depending on your page requirements, you may want to mark the location of titles. Perhaps subtle, a way that isn't distracting yet is noticeable. Here's one way to do it.

The dotted underline can be considered a subtle hover mark.

When you hover over the words with the dotted line underneath, the tooltip will pop up.

Here is the source code for the above example.

The dotted underline can be considered a <span style="border-bottom:1px dotted #666;" title="Some things are subtle and some things are not subtle.">subtle hover</span> mark.

The above span tag has two attributes. One attribute is for the CSS style, and the other is for the tooltip text.

style="border-bottom:1px dotted #666;"
title="Some things are subtle and some things are not subtle."

Multi-line Tooltip

When you want a title with line breaks, don't use the HTML br tag. Instead, simply insert a line break within the title text.

This example will display the ubiquitous "roses are red" poem as a tooltip.

Do you like the roses are red poem?

And here is the code.

Do you like the <span style="border-bottom:1px dotted #666;" title="Roses are red.
Violets are blue.
Sugar is sweet.
And so are you."><i>roses are green</i></span> poem?

As before, there is a style atribute and a title attribute.

style="border-bottom:1px dotted #666;"
title="Roses are red.
Violets are blue.
Sugar is sweet.
And so are you."

With the title attribute, it is easy to implement tooltips on hover.

(This content first appeared in Possibilities newsletter.)

Will Bontrager