Awesome Software

Like almost everything that has the potential to be incredibly useful, hover tooltips have been taken over by advertisers. When you visit any number of large, ad-supported sites, you see text that looks like a link, but when you mouse over it, an irritating, usually unrelated ad pops up. It’s even worse that a significant portion of them can’t even be bothered to use decent grammar.

But I digress. If you promise to use these hover tooltips for good and not for evil, you can use them on your own site. I have found them particularly useful for one of my clients that requires a data-rich intranet. Only so much data can fit on the page, but if extra data is available on demand, it saves having to click over to a separate page and back.

You can mouse over here to see how it works.

OMG you did it!

Wow, that was cool. Imagine for a moment that your webpage contains a list of people, and sometimes you might want to see the addresses belonging to those people. The point of the page is to display names, but you need to see addresses often enough that it’s a pain. You could use a popup window, or you could just link the names to a page that displays the address for that name. Or you could use a hover tooltip.

Alice Archetype

123 Main St.
Anytown, USA
787-555-3931

Bob, the Builder

234 City Pl, Bigcity, USA
723-555-3931

Wow, that was sweet. Here’s the code to do it:

<div 

onmouseover='document.getElementById("example").style.visibility="visible"'

onmouseout='document.getElementById("example").style.visibility="hidden"'

>

Alice Archetype</div>

<div id="example" style="border: 1px solid rgb(0, 0, 0); padding: 3px; font-size: 10px; width: 125px; max-width: 200px; position: absolute; visibility: hidden; background-color: rgb(238, 238, 238);">123 Main St.

Anytown, USA

787-555-3931

</div>

<div

onmouseover='document.getElementById("example2").style.visibility="visible"'

onmouseout='document.getElementById("example2").style.visibility="hidden"'

>

Bob Builder</div>

<div id="example2" style="border: 1px solid rgb(0, 0, 0); padding: 3px; font-size: 10px; width: 125px; max-width: 200px; position: absolute; visibility: hidden; background-color: rgb(238,238,238);">234 City Pl,<br>Bigcity, USA<br>723-555-3931

</div>

 

NOTE: in order to get this to look the way you want, you will have to:

1. Play around with the CSS styling for the hover <div>s
2. give a different “id” to each of the hover <div>s, so you can address them individually
3. possibly strip some of the extraneous whitespace out