Forums:
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:
- <p title="I’m a tooltip">Of all the fishes in the sea,</p>
Of all the fishes in the sea,
- The <span title="a sweet singer, a siren">mermaid</span> 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 <span></span> 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.
- <span title="As Far As I Know">AFAIK</span>, part of Cathy’s lack of self-confidence was because she saw herself as a <span title="a deceptive imitation or substitute; a pretence">simulacrum</span>.
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 <span> tag:
- <span title="As Far As I Know" class="dotbdr">AFAIK</span>, part of Cathy’s lack of self-confidence was because she saw herself as a <span title="a deceptive imitation or substitute; a pretence" class="dotbdr">simulacrum</span>.
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 <span> or any other tag, it provides the visual clue required.
Positive Signs
A fun idea
A fun idea could also be to use something like this to add easter eggs to your stories, similar to what a lot of webcomics do to the mouseover text when you hover over their pages. I can just see it now, reading through a story and following the text with your mouse pointer when EUREKA! A whole new sentence appears in the tooltip that you would have never found otherwise! Or better yet, do something like that with the tooltip text being an essential part of the story, say a third person viewpoint tale with a lot of further information being provided by hovering over character's names, giving you a brief first person account of their feelings on whatever is going on at the time?
It could be fun!
Melanie E.
Oh Yeah!
I like the way you think, Melanie. Indeed it could be a lot of fun, though might be a little difficult to set up.
Should you achieve this, please let me know, as I'd definitely like to try it out!
Potential Sport
Bike Archive
Bike Resources
Heheh, I WISH!
I doubt I could pull it off, myself. For one thing, I'm already too slow in writing the more typical, straight-forward type of story, and something like that would require a lot more planning if you wanted it done well. And for another, I don't feel comfortable with HTML coding as it is, and if I don't even feel comfortable enough to use it for things as simple as bold and italics on a regular basis, there's no WAY I'd be able to do something like that!
But it would be great to see, wouldn't it? :P
Melanie E.
Doesn't work on my Firefox
The dotted underline is visible in Safari but not in my Firefox/Mac - Moni
Thanks
I appreciate the headsup Moni.
I tested it with Google Chrome, and Firefox/Win XP, where it works fine.
Curiously, identical CSS code works fine in IE8 on the Bike archive website (link below), but when I load this BCTS page in IE8, the dotted underlines aren't there. Little wonder that a famous author here refers to IE as Internet Exploder!
It's a pity that there aren't definite standards for HTML/CSS to which all the browser builders adhere. C'est la vie n'est pas?
When it works, I reckon it's a useful technique, which was the aim of my post: to raise awareness.
Pathetic Standards
Bike Archive
Bike Resources