we can create pure CSS tooltips which are simple and accessible, because they will work even if the user browses the page without JavaScript enabled.

What we need is just aplain list of links. The XHTML code should be something like this:

<ul>
   <li><a href="http://www.google.com"><span>Google.com</span></a></li>
   <li><a href="http://www.yahoo.com"><span>Yahoo.com</span></a></li>
   <li><a href="http://www.cssbeauty.com"><span>CSSBeauty.com</span></a></li>
</ul>

Now we need to float the <li> elements in order to put each block on a same row. Then we can add a position relative to the links, in order to allow the span element inside to be positioned in an absolute way respect the parent link. The span have also a display:none property set, which is changed into a display:block one when the mouse goes over the block.

Here is the basic CSS code:

#miniadv ul{margin:0;padding:0;list-style:none}
#miniadv ul li {float:left;margin:0 2px 2px 0}
#miniadv a{float:left;position:relative;z-index:5; width:18px;height:18px}
#miniadv a:hover{z-index:10}
#miniadv a span{display:none}
#miniadv a:hover span {display:block;position:absolute; bottom:2em;right:2em;width:135px}