Here is a cool one I made which has a hidden div around two fancy CSS Sprite buttons.

When you hover over one of the buttons, a text message displays below it... a different message with info about each button.

Here is a test page... nothing is working but this script...

http://companypolicies.org/privacy-policy/

I put it up in a JavaScript Fiddle if you want to experiment with it:
http://jsfiddle.net/hxzRq/

Here is the coding:

HTML Code:
<html>
<head>
<title>Test of CSS Sprites with "ToolTip info DIV"</title>
<style type="text/css">
/****************************************************************
CSS Sprite Buttons
****************************************************************/
div.background {
    margin-left:36px;
    padding:15px 20px 10px 20px;
    height: 190px;
    width: 450px;
}
div#background:hover { 
	background:#eee;   /* Background color when you mouse over */
	cursor:pointer;  /* Turn cursor to hand */
}

div#background p { 
	display:none;   /* Hide Links Initially */
}


div#getpolicy a{
  float:left;
  display:block;
  width:203px;
  height:74px;
  background-image: url("http://www.companypolicies.org/images/get-policy-sprite.png");
  background-position: 0px -76px;
}
div#getpolicy a:hover{
  float:left;
  display:block;
  width:203px;
  height:73px;
  background-image: url("http://www.companypolicies.org/images/get-policy-sprite.png");
  background-position: 0px 0px;
}

div#genpolicy a{
  float:right;
  display:block;
  width:203px;
  height:74px;
  background-image: url("http://www.companypolicies.org/images/generate-policy-sprite2.png");
  background-position: 0px -76px;
}
div#genpolicy a:hover{
  float:right;
  display:block;
  width:203px;
  height:73px;
  background-image: url("http://www.companypolicies.org/images/generate-policy-sprite2.png");
  background-position: 0px 0px;
}
​</style>
<script type="text/javascript">
<!--

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>
</head>
<body>
<div class="background" id="background">

<div id="getpolicy" onMouseOver="toggle_visibility('links');" onMouseOut="toggle_visibility('links');">
  <a href="#"><img src="http://www.companypolicies.org/images/clearpixel.gif" width="203" height="65" border="0" /></a>
</div>

<div id="genpolicy" onMouseOver="toggle_visibility('links2');" onMouseOut="toggle_visibility('links2');">    
  <a href="#"><img src="http://www.companypolicies.org/images/clearpixel.gif" width="203" height="65" border="0" /></a>
</div>

<div style="clear:both"></div>
<br />
<p id="links" style="margin-top:20px;"><br />Click this button to download a Privacy Policy template in a variety of formats, such as MS Word, raw HTML or you may simply view a template on a webpage.</p>
<p id="links2" style="margin-top:20px;">Click here to use our free Privacy Policy generator tool and generate your privacy policy online. You can also get the HTML for your policy to cut and paste it into your blog or website.</p>
</div>​
Please feel free to use this script and 'borrow' the images if you find them useful. However, please do not hotlink to them - upload them to your own server. Thanks!
<br />
Also feel free to give me a back link if this helped. :) :)
<a href="http://www.companypolicies.org">Company Policies</a>
</body>
</html>