Уроки CSS "Создание всплывающей подсказки"

Евгений

Для начала в ваш фаил CSS залейте вот эти строчки.

.tooltip {
     margin: 50px;
}

.tooltip a {
     text-decoration:none;
     color:#333;
}


.tooltip a:hover {
     position:relative; /* Установка позиции для отступов */
}

.tooltip a span {
     display:none; /* Запрет показа подсказки без наведения */
}

.tooltip a:hover span{
     font-size:8pt; /* Задание размера шрифта подсказки */
     display:block; /* Задание показа подсказки */
     position:absolute; /* Задание положения подсказки */
     top:-15px; /* Задание отступов */
     left:50px;
     background:#65b5ff; /* Задание цвета фона подсказки */
     border:1px solid #002649; /* Задание границы поля подсказки */
     color:#fff; /* Задание цвета шрифта подсказки */
     width:110px; /* Задание ширины поля подсказки */
     padding:5px;
     opacity: 0.8; /* Задание прозрачности поля подсказки */
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

Далее уже в ваш фаил index.html или куда вам нужно пишим вот это.

Код: Выделить всё

<div class="tooltip">
<a href="#">текст ссылки<span>пояснение к ссылке</span></a>
</div>

И при наведение на вашу ссылку будет всплывать подсказка.

Источник

не самый лучший вариант
- если у ссылки указать атрибут title, то будет вылазить еще и подсказка браузера
- filter:progid:DXImageTransform.Microsoft.Alpha не пройдет валидацию, т.к. яляется хаком для IE6
- и наконец для использования нужно править все ссылки.

правильнее написать самому или использовать плагины jQuery, которые автоматически добавят подсказки ко всем необходимым ссылкам, взяв текст подсказки из title