Menu with hovering tootips (CSS)

You want to display additional tooltips when visitors hover over a link in your menu. Most of the time you need Flash or Javascript, and their view/hide layer function will help you create your effect.

However, there is an easier, more compatible way to do this (as you may know, Javascript is disabled on inactive for almost 13% of web users) without programation language nor Flash.

We will use <a> à CSS tag to which we will integrate <span> which will be masked and then displayed using the "display: none;" and "display: block;" attributes. (View result here)

Note: /* These texts are explanation comments ans can be removed at will*/

CSS code:
	
ul {
list-style-type: none;
margin:0;
padding:0;
position: absolute; 
top: 2em; /* Menu position that can be changed at will */
left: 3em;
}

li {
float: left;
}

.menu a {       /* definition for each button in the menu */
width: 100px;	   /* button width that can be changed at will */
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid #fff; 
text-decoration: none;
color: #000;
background: #fff;
}

.menu a:hover {
color: #411;
background: #AAA;
border: 1px solid gray; 
border-bottom: 0px;
color: #fff;
}

.menu a span {     /* definition of <span> tag included in <a> */
display: none;
}

.menu a:hover span {   /* definition of the <span> tag when hovering */
display: block;
position: absolute;
top: 20px;
left: 0;
width: 600px;       /* Tooltips zone width according to menu width */
text-align: left;
border-top: 1px solid gray;
color: #000;
}

HTML code:

<ul class="menu">
<li><a href="">Menu 1<span>Lorem ipsum dolor sit amet, consectetuer 
    adipiscing elit. Vivamus ipsum dui, vulputate ut, eleifend pretium, tristique 
    a, velit. Morbi lacus</span></a></li>
<li><a href="">Menu 2<span>Cras eu mi vel pede 
    tempus dignissim. Etiam malesuada scelerisque massa. Maecenas metus sem, consectetuer 
    quis, rhoncus non, euismod id, elit</span></a></li>
<li><a href="">Menu 3<span>Cras 
    fringilla. Integer in neque. Nulla massa. Vestibulum eleifend mattis erat</span></a></li>
<li><a href="">Menu 4<span>Sed bibendum vehicula sem. Donec venenatis diam eu 
    erat. Ut rutrum sem ut erat</span></a></li>
<li><a href="">Menu 5<span>Phasellus tristique, 
    turpis in nonummy luctus, eros enim pellentesque felis, sed venenatis quam 
    orci quis nisl. Nulla id nunc. Nam porttitor volutpat erat<em>can't</em> she 
    do?</span></a></li>
<li><a href="">Menu 6<span>Last senseless sentence.</span></a></li>
</ul>

Simply enter and modify your own parameters.

Some of the CSS syntax may appear difficult, for example .menu a:hover span, you will find more explanations in this article on inheritances and overlapping.

 

(liberally inspired of http://www.meyerweb.com/eric/css/edge/popups/demo.html)

Print article

Raphaël GOETTER
www.alsacreations.com