|
The ToolTip Trick
A year or so ago, I talked about
the usefulness of
"tooltips". These are little boxes which
appear on a web page when you "mouse over" text
or images. I talked about a free online service where
you could build these "tooltips" by just
completing a web form and then copying and pasting
the generated script into your web pages.
I recently wanted to use these
tooltips in one of my projects. Alas, the service -
and the website which supplied it - is no more. So
I had to try another source. I must have tested half
a dozen scripts before I came across this one at:
http://www.walterzorn.com/tooltip/tooltip_e.htm
This guy Walter has produced a
fantastic tooltip script - and it's completely free
to download. Here's an example of it in action.. Put
your mouse over this text - and you'll
see a tooltip in action.
It's also extremely easy to use.
Download the zip file from Walter's site above, unzip
three Javascript files and upload them to your web
server.
Before you do that, you might want
to make a few changes to one of the scripts, (wz_tooltip.js)
using a text editor. This will set the "default" parameters
for your tooltips. Here's an example of one of the
things you can change:
config.
BgColor = '#D9EDFF'
// Background color
Simply change the value I've highlighted
in red and that sets the background colour (sorry, "color"!)
for your tooltip. There's about 40 parameters you can
change, but, apart from the colours and font sizes,
I just left them all as their defaults.
Then, on any page where you want
to display tooltips, just after the <body> tag,
put this snippet of code:
<script
type="text/javascript" src="wz_tooltip.js"></script>
This assumes that "wz_tooltip.js" file
is in the same folder as your web page. Otherwise,
just change the path to the script. So, if you've put
it in a folder called "scripts", and this
is a sub-folder of the one where your web page sits,
then the code would be:
<script
type="text/javascript" src="scripts/wz_tooltip.js"></script>
Then, wherever you want a tooltip
to appear, just put this bit of code:
<a
href="javascript:void(0)" onmouseover="Tip('Content',
TITLE, 'title')">
Put your hyperlinked text here
</a>
Simply replace "Content"
with what you want to put in your tooltip and "Title"
with the title of the tooltip box.
It really is that easy.
And you can put a tooltip on an image as well. For
the project I was working on, I wanted to put little
help buttons on the web page, so that when people wanted
more help on a topic, they just mouse-overed an image
like this one:  Here's
the code for this tooltip:
<a
href="javascript:void(0)" onmouseover="Tip('Tooltips
are a great way to give information on any topic
just by putting a little button like this one on
the page where help is needed', TITLE, 'A Little
Help')">
<img src="images/help.gif" width="20" height="20" border="0" align="absmiddle" /></a>
It's possible to put images and
HTML into a tooltip just
like this And here's the code which drives
this tooltip:
<a
href="javascript:void(0)" onmouseover="Tip('<p
align=center><b>Baglafecht Weaver</b><br>A
bird I photographed in Kenya<br><img src=bird.jpg
width=142 height=186</p>',
TITLE, 'Weaver Bird')">
<strong>just like this</strong></a>
Notice the bit in green Normally
I would have put speech marks into such code, like
this:
src="bird.jpg"
width="142" height="186"
.. but I left them out because there's
one important thing you must remember:
NEVER put an apostrophe
(') or speech marks (") in the tooltip text unless
you put a \ in front of it. If you put:
Here's
an idea for you
.. it will generate an error. Instead
put:
Here\'s
an idea for you
It will save you a lot of frustration
if you remember this. I speak from bitter experience!
You can put any HTML in
one of these tooltips, but it's safer to leave out
the normal " " which enclose the attributes
of the tag.
Walter Zorn gives a huge amount
of help on his web pages. I've hardly touched the surface
of what this tooltip script can do. So, if you want
to start putting some cutting-edge tooltips on your
web pages, go and download the script now - and you're
not even asked for your name or email address. Here's
the web address again:
http://www.walterzorn.com/tooltip/tooltip_e.htm
I hope you've found this useful.
|
Put
some of my "tricks" to work on your website.
The Webmasters CheatKit range of
products helps you to build professional websites
without needing a load of techie skills!