Pure CSS Tooltips tutorial

Recently I was asked by a client to provide some pretty mouseover tooltips using CSS with no JavaScript, I came up with the following solution. It’s by no means perfect but hopefully some of you may find it useful to build something upon.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

a.info{
	position:relative;
	z-index:24;
	background-color:#ccc;
	color:#000;
	text-decoration:none;
	}
 
a.info:hover{
	z-index:25;
	background-color:#ff0
	}
 
a.info span{
	display:none;
	}
 
a.info:hover span{
	display:block;
	position:absolute;
	top:2em;
	left:2em;
	width:15em;
	border:1px solid  #0cf;
	background-color:#cff;
	color:#000;
	text-align:center;
	}

If you do use it at all, do let me know so that I can see it in action.

Your Thoughts...