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 web sites 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.
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.
—————
With the information in this article, you are armed with a
technique to improve your web sites' visitor-friendliness.
This can have other benefits, such as more repeat visitors
and voluntary word-of-mouth advertising.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©Copyright 2007 Bontrager Connection, LLC Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
