More Tooltips Using CSS Only

What is really happening in this script is that an undisplayed block of text in a span is redisplayed when one hovers in the link that holds it in the page text. By the way, hover is a css pseudo-class that seems to act like an event but it isn't an event—it's just "lively" CSS. It is not the same as mouseover even if it acts like it.

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 (Pure CSS Popups) 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.

In the test code for css-only-tooltips-test.html below, the rectangular tooltip tester pops up a popup with text in it when you hover or scim over the underlined word. The tooltip will be superimposed upon the text below the tooltip triggering word(s). The script for tooltips-using-CSS-only.html does the same but cannot superimpose tooltips on other text. Instead, it makes the tooltips the same width as the text in the paragraph block and when it pops up, it forces the text in the div downward to accomodate the new row—a row which is the new tooltip. Once the tooltip trigger word is no longer hovered, all content goes back to its original form—moving up a row.

In the script below, we will use a span tag surrounding the tooltip text, and the span is in a link. But there are a few things you need to do to get it to work right. One is to add line breaks to adjust the width of the tooltip rectangle. Another is using relative positioning on the hover style for the link that encloses the tooltip trigger word(s), and absolute positioning on the hover style for the span inside the link that encloses the tooltip trigger word(s). Of course, the display property should be none on the span unless the hovering occurs, at which time you need the style property to be block. To deal with browser quirks, the CSS style white-space:nowrap should be added to the link's hover span style. Otherwise most browsers—except IE 6,7,8—will try to put the tooltip text words in a tall vertical column. Opera 10.63 and Opera Beta 11 need babysitting to deal with a bug we found. The bottom of tooltips are cut off if the tooltip is not displaying over other page text—which looks atrocious. It took a while to come up with a fix, but we had to remember that we couldn't use JavaScript to browser sniff. So we added something that would fix the problem in Opera and not be too nasty in other browsers. In the code, the span tag with the CSS of style='font-size:72px', then lots of nonbreaking spaces, then the end of the span tag—all this is the needed fix for Opera. Making the page longer with breaks did not work. There had to be characters, and these are what worked, since otherwise you would have to remember to never put tooltips in the bottom part of the page. With our method, it's all cross-browser and you need only remember to stick the span with the nonbreaking spaces at the bottom of the text area and you're good to go.

The website page http://www.fijiwebdesign.com/blog/css-tooltips-floating-html-elements.html (link no good) is the first place we saw relative positioning used correctly with css-only tooltips. Other tooltip popup related links: The Rectangular Tooltips Getting Data from .js File and the Rectangular Tooltips Getting Data from PHP File Using Ajax test pages will work on Windows IE 5.5, 6, 7, 8, Safari, Chrome, Firefox, Opera, and . . . that's all we tested, and the other scripts in this paragraph as well as the script below will work on these as well. Tooltips will just pop up, and follow the cursor in the 2 scripts just mentioned. If you want balloon tooltips that follow the cursor, you'll want Balloon Tooltips That Follow the Cursor, and if you want stationary balloon tooltips, you'll want Balloon Tooltips. The Rectangular Tooltips script does not get data from anywhere—the data is simply sent as a function parameter.

Now—on to the script code:

<html>
<head>

<style type="text/css">

</style>http://www.fijiwebdesign.com/blog/css-tooltips-floating-html-elements.html
</head>
<body>
Here we go with <a href="#">CSSCascading Style Sheets are CSS</a>.
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <a href="#">CSSCascading Style Sheets are cool Cascading Style Sheets are hot</a>.
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <a href="#">CSSblahhhhhhhhh blahhhhhhhhh blahhhhhhhhh blahhhhhhhhh blahhhhhhhhh blahhhhhhhhh blahhhhhhhhh blahhhhhhhhh blahhhhhhhhh blahhhhhhhhh blahhhhhhhhh blahhhhhhhhh</a>.
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <a href="#">CSShello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</a>.
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <a href="#">CSShi and goodbye, bunky</a>.
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 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 Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah   
         
         
         
          
         
         
         
         
         
         
         
          
         
         
         
     
</body>
</html>

Free Personal Status Boards (PSB™)

More Tooltips Using CSS Only