blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah gimme a tooltipOkay, how about this—will this do? blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah gimme another tooltipOkay, but aren't you tired of tooltips yet? blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

So it seems, when you read the article about Pure CSS Popups, by Eric A. Meyer, that there is a CSS-only way to do popups. And of course Peter-Paul Koch did what he is amazingly good at: testing. The result was a tweak to the Pure CSS Popups article's script: Bug Fix for Pure CSS Popups.

Our take on it is to show how it can work right inside paragraphs—where many tooltips reside. It simply moves everything down a line, keeping all content in the "flow." It's important to keep the width of the tooltip the same as the paragraph by—in this case—not giving it any contrary style info, or you'll find the entire paragraph narrowing to be like the tooltip span.

As you can tell, the W3C (a.k.a. World Wide Web Consortium) did not really expect webmasters would be sticking tooltip spans into links and running them with hover. But the idea was just too creative for Eric A. Meyer to resist. To tell the truth, we do find it kind of irresistable. But is it practical? Our guesstimate is that yes, as a fallback if people have their JavaScript turned off but a webmaster still wants to give them tooltips.

But, in addition, we have seen something very much like this in the FAQ pages of certain websites. Although some sites make one click on the question and then the answer (like the tooltips on this page) comes up under the question, pushing the page contents lower, we also believe there were some sites where hovering over the question was all it took. If you'd like to do that on your site, feel free to use Eric's script, PPK's code tweak, and our own tweak as well. (Why else would we spend our time coming up with cool scripts for our readers if not for them to learn from them and use them?) You'll get the result seen above. Eric and PPK did enough testing, but we tested it on IE6, IE7, IE8, Firefox, Opera, Chrome, and Safari anyway. Works great!

Here are the CSS styles:

body {font:15px verdana;}

div#cssonly a {color:#00f;cursor:default;text-decoration:none;}
div#cssonly a:hover {text-decoration:none;border:none;}
div#cssonly a span {display:none;padding:6px;font-size:12px;background-color:#eee;border:1px solid #000;}
div#cssonly a:hover span {display:block;}
div#cssonly {width:600px;margin-top:100px;margin-left:200px}

And here is what they are styling:

<div id="cssonly">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
<a href="#">gimme a tooltip<span>Okay, how about this—will this do?</span></a> blah blah ad infinitum ...

So all that is really happening is that an undisplayed block of text in a span is redisplayed when one hovers in the link that holds it in the div with the cssonly id. (Sounds simple when we say it like that—so then why didn't WE come up with it? Who cares. We're glad Eric came up with it!)

For a similar css-only tooltip script in which you can control the width better and that is not in the flow but will superimpose the tooltip on top of other content without moving anything downwards, see css-only-tooltips-test.html for the test page and more-tooltips-using-CSS-only.html for the tutorial.