Мастерская CSS

Всплывающие подсказки


Всплывающие подсказки - это небольшое текстовое поле, появляющееся на экране, когда пользователь наводит указатель мыши на элемент с атрибутом title или элемент гиперссылки.

1. Создание всплывающей подсказки с помощью CSS

Гиперссылке с подсказкой присвоен класс tooltip, чтобы отличать ее от других гиперссылок. В элемент гиперссылки добавлен текст, выводимый постоянно. Текст всплывающей посказки помещен в тэг <span>.
Текст всплывающей подсказки заключен в скобки, чтобы при отключении таблицы CSS предложение осталось осмысленным.

/*стиль оформления всплывающей подсказки*/
a.tooltip {
display:block;
position:absolute;
top:-2em;
left:2em;
width: 250px;
height:40px;
margin-bottom:0.6em
padding:1em;
border: 1px double #996633;
background-color:#eeeeee;
color:#883791;
font-size: 100%;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:3px;
}

<!--код html-документа-->
<a href="http://na-lenskoy.ru" class="tooltip">Сайт На Ленской<span>(Это сайт ДДЮТ На Ленской)</span></a> - официальный сайт.

назад


2. Создание всплывающей подсказки с помощью атрибута гиперссылки title CSS

<!--код html-документа-->
<a href="http://na-lenskoy.ru" title="Официальный сайт ДДЮТ На Ленской" target="_blank">Сайт На Ленской</a> - официальный сайт.

На Ленской - официальный сайт.

назад