Tooltips (Popup Text)

Forums:

Just the FAQs

Taxonomy upgrade extras:

What is a tooltip?

Sometimes when you hover your mouse cursor over things on a webpage, you may get some text popping up to explain things further.

Wikipedia defines a tooltip as:
...a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear–a small “hover box” with information about the item being hovered over.

As an example, try hovering your cursor over the word Wikipedia above.

How do I add tooltips to my postings here?

If you’re comfortable using HTML tags, it’s fairly straightforward.

Virtually all HTML tags have a title attribute which can be used to provide the tooltip. Here are a couple of examples:

Of all the fishes in the sea,

Of all the fishes in the sea,
The mermaid is the one for me!
The mermaid is the one for me!

[Try hovering over the examples to see the result.]

While you can add tooltips to virtually any HTML tag that goes between <body> and </body> on a webpage, the tag is probably used most often because it is only used for in-place character formatting.

Why would I want to bother?

Your text may use acronyms or words that some readers may not know. You may wish to provide further explanation without cluttering up the text.

AFAIK, part of Cathy’s lack of self-confidence was because she saw herself as a simulacrum.
AFAIK, part of Cathy’s lack of self-confidence was because she saw herself as a simulacrum.

How will visitors know that there’s a tooltip provided?

Serendipity, unless you provide some sort of visual clue. A loosely accepted convention is that a dotted underline serves to indicate that more information is available by hovering.

The only problem with this approach is that in HTML there’s no way to format text with a dotted underline. Instead, an additional technique called CSS is required.

Thanks to Erin, here at BCTS, it just needs one extra bit, adding a CSS class to the the tag:

AFAIK, part of Cathy’s lack of self-confidence was because she saw herself as a simulacrum.
AFAIK, part of Cathy’s lack of self-confidence was because she saw herself as a simulacrum.

As you can see, the class is called dotbdr. Added to a or any other tag, it provides the visual clue required.

Positive Signs