Andrea Cima Serniotti - A brilliant blog about web design and development

You are in this section: Blog

I think you can easily remember the great success made by what was called “The Million Dollar Homepage”. A simple page covered by loads of mini banners which has led the owner to become millionaire and to leap to fame.

The JavaScript way

Quite a few websites adopted this useful way of making money. In most of the cases, you can get more information about the specific banner by hovering it with your mouse. By doing this, a small tooltip appears, providing additional info as name, tagline or simply a link back to the website who purchased the adv block.

This feature is often realized by using a small JavaScript. But what about those users browsing with JavaScript disabled? The answer is pretty simple. They won’t see the tooltip and the adv info. That means the content will not be accessible for them.

The CSS way

So, what can we do to get the same nice tooltip feature and to improve accessibility? The solution is CSS. In fact, 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.

This is what we’re looking for and now let’s get into details.

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

1
2
3
4
5

<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:

1
2
3
4
5
6

#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}

Let’s take a look at the example! You can download the full sample using the link below. Use it whenever you like, but please link back to this article.

Download the Pure CSS Tooltip sample (ZIP, 9KB)