Making SPAN and javascript mouseover tooltip popups for your webpage

Until fairly recently, popups had to be new browser windows opened by Javascript. However, with the introduction of the 'TITLE' annotation tooltip (which can also be inserted into hyperlinks to explain the link in more detail), the familiar (to Windows users) yellow popup box can be added to any word in the text of a webpage. This has many uses:

give definitions of words for second-language speakers
display bible references or a whole bible verse
show other annotations, references, meanings, additions, amplifications, answers to questions, jokes, etc.
to enhance the instruction to make a bookmark/shortcut, as demonstrated at the end of this page

To make a TITLE popup appear, without a word being a true hyperlink, we need to use the SPAN tag, and also color the word - otherwise no-one would realise they must hover the mouse over it. It seems logical to color-code words a different color than the real hyperlinks on your page - (and probably non-underlined) and also include an explanation somewhere on the site about the meaing of words so colored.

This is supported by all the latest browsers, and we can confidently expect it to be universal very soon.

Each word could be colored by a font color tag. However, it is much easier to use a Style sheet to control an entire class of such words.

The descriptive TITLE text description can be quite long if needed.

A style sheet in the page header, or incorporated into a site-wide style, could look something like this:

.popup
{
COLOR: #9F141A;
CURSOR: help;
TEXT-DECORATION: none
}
</STYLE>

with the text on the page appearing like this:

<SPAN title=" description here " class="popup">text</SPAN>

By leavng a space before and after the description, additional left/right padding is created making the text easier to read. The value for CURSOR can be the following: default, auto, crosshair, hand, move, n-resize, s-resize, e-resize, w-resize, ne-resize, se-resize, nw-resize, sw-resize, text, wait, help. The HELP value creates a mouseover ? mark, and seems the most suitable for any situation where you are wishing to provide an answer or further information.

The value for color can be any possible color using hexadecimal or whatever. Text-decoration can be none or underline if you wish it to appear like a normal link.

You can also add the line FONT-STYLE with these values: normal, italic, oblique. Additional other style elements can be introduced if needed.

See it working
Here are some examples:

He can remember the Apollo 11 flight.
Jesus promises us the resources to cope with the problems of life.
We should be like the men of Isachar, who understand the times we live in.
This development was pioneered by Professor Miller.
How long was the Hundred Years War? 70 years? 130 years? 117 years?
They gave him myrrh.

You can also add a title annotation to the text area of a form, and/or to the form button, to amplify any instructions you wish to provide to users.

Additional information at CSS sites such as: W3 | Hypergurl | Jigsaw.

You can achieve more sophisticated results with colored text, background and even graphics in the annotation box, using DHTML tooltips - but it requires a lot of extra code on the page:

Overlib

Using Javascript

If you want bigger popups with colored backgrounds, control over font appearance, etc, it is necessary to use Javascript mouseover popups. Be aware however, that about 5% of people have Javascript-disabled browsers, so your pages must still be meaningful to these visitors. In addition, some popup killers are now preventing a mouseover popup actually working. So, increasingly, it is better to look at Javascript/CSS, or ideally, pure CSS alternatives which do not require a new browser window to open. Here's a CSS-only solution.

If you include the coding for the text, color, even graphics, within the script, they are much quicker to operate because they don't actually have to open a new page. Here is one example, offering a word definition.

"I was surprised to see an adder in my garden today."

If you view the source code for this page (including the style sheet and javascript in the page head, you will see how this popup has been created. Copy the coding and make modifications according to your own requirements. The link in this case goes to a footnote or new page, for those for whom Javascript is not working or who have blocked popops (see below. You can control many features of the popup - size, background, font, even include a graphic.

For more detailed information on creating Javascript popups, check:

Integrated popups

DHTML |
Other tooltip resources.

Popups

Giving extra information

Using Javascript

Helping second-language English speakers