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

Аватара пользователя
Евгений
Сообщения: 228
Зарегистрирован: 01 янв 2010
Для начала в ваш фаил 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>


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

Источник
Последний раз редактировалось Евгений 18 мар 2010, 20:59, всего редактировалось 1 раз.

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


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


Вернуться в «Уроки и статьи по верстке»