|
Presented on 26 January 2006
This
lesson is based on the "Cool
DHTML Tooltip,"
from dynamicdrive.com. A tooltip is a text box that appears
when a person mouses over an image, link, or other HTML element.
Unlike the "Alt" attribute of images, this DHTML tooltip
stays visible as long as the mouse is over the designated
area.
There are three steps:
- Insert the style sheet into the <head> of the
HTML document.
- Insert the
second block of code into the <body> of the
document, outside any other tags. It's
a good idea to place it immediately after the <body> tag,
just to be safe.
- Add the following code inside the tag for a link or
any other page element (such as images):
| onMouseover="ddrivetip('text
text text text text text text text','yellow', 300)";
onMouseout="hideddrivetip()" |
In the code above,
ddrivetip controls the appearance of the tooltip.
- The text
in red should be replaced with the
text that you want to appear in the tooltip.
- The two
attributes following the text (in
green) are
optional, and control the color background color
and width of that individual tooltip.
- If the
attributes in green are
not set, the tooltip will default to the color and
width set in the <head> of
the document.
For example,
if you wanted to add a tooltip to a link back to the
Northside homepage, with an off-white (ivory) background
and a tooltip width of 250 pixels, the tag might look
like this:
| <a
href="http://www.nisd.net"
onMouseover="ddrivetip('This
link will return you to the Northside homepage,
at www.nisd.net ','ivory', 250)";
onMouseout="hideddrivetip()">Back
to Northside</a> |
- If you want to change the font, size or color of the
text in the tooltips, that needs to be done in the style
sheet that you inserted into the <head> of the document.
For example:
font-family:
Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF; |
Note: If
your tooltip text contains an apostrophe
('), a backslash is needed before each apostrophe,
like in the example below:
Alternatives to Tooltips
- Use the alt attribute of images to "caption"
graphics and photos.
- Use hotspots and alt attributes to identify
people, objects, buildings, etc. within an image.
- Use Dreamweaver's
Behaviors to create pop-up windows. Decide which one
of the following conditions you want to activate the
pop-up:
- When a
visitor mouses over a link
- When a
visitor clicks a link
|
