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

Jemand — Sun, 08 Nov 2009 15:08:42 +0000

Иногда возникает необходимость вывести подсказку при наведении курсора на какой либо объект страницы (в данном случае ссылки), но 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

HTML CSS Blog » Tooltip

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