HTML Tooltips With CSS Enhancements
You're probably aware that when a cursor hovers over text affected by a TITLE attribute, the value assigned to the attribute shows up as a tooltip.
This article shows you examples of how using that one attribute can make your websites more visitor-friendly.
Here is an example of a TITLE attribute of a B bold tag:
These are <b title="Bold means important">bold words.</b>
A tooltip saying "Bold means important" becomes visible when the cursor hovers over the active text, "bold words."
There are many, many ways to use the TITLE attribute for you and your site visitors' benefits. Here are just a few examples:
-
Definitions.
-
One-line ads.
-
Hints.
-
Instructions.
-
Easter eggs.
These tooltips are invisible until the mouse hovers over the area of the tip, over the active text. This makes the tip available to those who need it, yet it doesn't clutter the page.
Generally, the tooltips would be used for secondary or supplementary information. Keep the tip short enough to display all one line. Some browser will truncate the tip at the end of the first line.
Unless you're hiding an easter egg, it would generally be friendly to somehow suggest there might be a tooltip.
The A link tag and, in most browsers, the ABBR and ACRONYM tags are formatted different than is normal text. Usually, linked text is underlined or has some other different than normal formatting. And the abbreviation and acronym tags have a dotted underline in most browsers. These suggest something more than just what meets the eye.
CSS styles can be used to make active text suggestive within HTML tags. And it can be used to enhance or change default styles.
CSS can also be used to change the cursor over active text when that is appropriate.
Here is the source code of a complete web page. It contains numerous examples, some CSS enhanced in various ways.
<html>
<head>
<style type="text/css">
.helpcursor {
cursor: help;
}
.dotsunder {
border-bottom-color: #999;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
.doubleunder {
border-bottom-color: orange;
border-bottom-style: double;
border-bottom-width: 3px;
}
</style>
</head>
<body style="margin-bottom:50px">
<h3>Example inline tags</h3>
<p>The A tag —<br />
Common methods of serving dynamic web pages use the
<a
href="/support/howtoinfo/howcgiworksarticle.shtml"
title="The 'How CGI Works' article."
target="_blank">
CGI</a>
protocol.
</p>
<p>The ABBR tag —<br />
For the Gregorian calendar, the first month of the year is
<abbr
class="helpcursor"
title="January can be abbreviated as Jan.">
Jan.</abbr>
</p>
<p>The ACRONYM tag —<br />
Browsers consult the
<acronym
class="helpcursor"
title="HTML is an acronym for Hyper-Text Markup Language">
HTML</acronym>
in the source code to determine how to render web pages.
</p>
<p>The B tag —<br />
<b
class="helpcursor doubleunder"
title="Your special discount is 25%">
Hover your mouse here</b>
to see your special discount.
</p>
<p>The SPAN tag —<br />
Can you
<span
title="Type code XYZ into order form to get 50% off!">
find</span>
the easter egg?
</p>
<h3> <br>Example block tags</h3>
<p style="margin-bottom:-14px">The P tag —
</p>
<p
class="helpcursor"
title="Forehead slapper: This is a paragraph :~)">
<span class="dotsunder">Entire paragraphs can be assigned
a tool tip.</span>
</p>
<p style="margin-bottom:0">The ADDRESS tag —
</p>
<address
title="Use only for postal mail.">
William and Mari Bontrager<br />
Bontrager Connection, LLC<br />
3213 West Main #301<br />
Rapid City, South Dakota 57702<br />
U.S.A.</address>
</body>
</html>
Copy the code and save it to your hard drive with a .html or .htm file name extension. Then load the file into your browser.
In the example web page, the "CGI" link has a "The 'How CGI Works' article." tooltip. The linked text is already formatted as a link, so no special CSS is used to make the active text more suggestive.
The abbreviation example and the acronym example both sport a dotted line under the active text (most browsers). That is suggestive. To suggest even more, CSS is used to change the cursor into a "help" cursor (usually sporting a question mark or balloon).
The example bold tag tooltip presents a method of getting special attention with instructions for what exactly needs to be done. CSS is used to double-underscore the active text with orange rules and to change the cursor into a "help" cursor. If they miss this, they'll just miss their discount, I guess :)
The SPAN tag is used to show an example of hiding an easter egg. No formatting in the text suggests anything might be hidden there. If you suddenly start getting lots of 50% off coupon orders, somebody is spreading the word.
In the example P paragraph tag, all the text in the paragraph is active. A span tag and CSS is used to put a light gray dotted underline under all of the text. (If the class were assigned to the P tag instead of the SPAN tag, the dotted underline would appear only under the last line of the paragraph.)
The ADDRESS tag, in this example, needs no special suggestions. Should anyone hover their mouse over the text to copy it, the "Use only for postal mail" tooltip will display. Nobody else needs to see it.
Will Bontrager
