Всплывающая подсказка при наведении на ссылку (CSS)

Иногда возникает необходимость вывести подсказку при наведении курсора на какой либо объект страницы (в данном случае ссылки), но title не подходит по разным причинам, тогда нам на помощь приходит следующий код.

CSS-код:

a {
z-index: 1;
text-decoration: none;
}
a:hover {
position: relative;
}
a span {
display: none;
width: 250px;
}
a:hover span {
text-align: justify;
display: block;
position: absolute;
float: left;
bottom: 15px;
left: 50px;
background: #ffffff;
border: 1px dotted black;
color: #444;
padding: 2px;
z-index: 2;
}

Теперь, чтобы подсказка появлялась при наведении на ссылку, нужно добавить <span>Подсказка!</span> перед закрывающей </a>. Т.е. привести ссылку к виду:

HTML-код:

<a href=”#”>Ссылка<span>Подсказка!</span></a>

Пример, того что получится, можно посмотреть здесь.

Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64