Всплывающая подсказка на css

HTML разметка проста до безобразия. В примере ниже сделаем так, что бы подсказка появлялась сверху при наведении на блок, содержащий ссылку:

<div class="wrap_element">
	<span>Подсказка для ссылки</span>
	<a href="#">Наведите курсор мыши</a>
</div>

Для того, что бы все заработало как надо, достаточно прописать следующие стили:

.wrap_element {
position:relative;
}
.wrap_element span {
display:none;
}
.wrap_element:hover span {
display:block; 
position:absolute; 
top:-45px;
left:10px;
}

Однако не помешает добавить немного кода, что бы придать конструкции приличный внешний вид:

.wrap_element {
padding:3px 10px;
display:inline-block;
position:relative;
}
a:hover {
text-decoration	: none;
}
.wrap_element span {
margin-left:8px;
padding:2px 3px; 
display:none;
color:#6c6c6c; 	
background:#ffffff; 
border:1px solid #cccccc; 
}
.wrap_element:hover span {
display:block; 
position:absolute; 
top:-45px;
left:10px;
}

Конечно, приведенный пример не является панацеей на все случаи жизни, но может пригодится в ряде ситуаций (например, подсказка в тексте), или послужить отправной точкой для реализации более продвинутых идей.

Примеры реализации приведенного выше кода

Примеры протестированы и отлично работают в браузерах: ИЕ 7-8-9, Chrome, Safari, FF, Opera.