Всплывающая подсказка на CSS

Окошко, которое всплывает по наведению курсора (в данном примере на ссылку) с использованием только CSS…

Для создания всплывающих подсказок в сети имеется множетсво готовых решений, но чаще всего они довольно сложные в самостоятельном исполнении и требуют знаний javascript или jQuery. Между тем, в этой статье предлагается вариант простой и изящный, с минимум кода на CSS — на столько простой, что каких-ибо специальных знаний не требуется.
Напомню, что мы будем показывать всплывющее окно при наведении на ссылку.
Первое, что нужно сделать — это отредактировать главный CSS-файл, добавив в него:

/*всплывающие окна*/
a div.popup {  
position: absolute;  
display: none;
border: 1px solid red;  
/*здесь и ниже идут уже не обязательные параметры, описывающие, как наше всплывающее окно 
будет выглядеть - можете настроить по своему усмотрению; свойство margin-left управляет
позицией всплывающего окна относительно родителя*/ margin-left: 145px; border-radius: 6px; padding: 3px; background: #FFFFAA; opacity: 0.8; filter:alpha(opacity=80); } /* не забудьте про этот блок - он выводит окно на экран, когда курсор находится над нужным нам элементом*/ a:hover div.popup { display: block; }

Далее, уже в html-документе, выводим ссылку с всплывающей подсказкой:

<a href="url ссылки">Текст ссылки<div class="popup">Текст всплывающего окна</div></a>

В общем итоге, при наведении курсора на ссылку, мы получаем всплывающее окошко с подсказкой.

Как видите, всё довольно просто. Стоит отметить, что всплывающую подсказку при наведении мыши таким способом можно отображать не только под ссылкой, а и практически под любым элементом веб-страницы. Но в случае, если окно должно выводиться не по наведению, а по нажатию кнопок, без javascript уже не обойтись.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

восемнадцать − 1 =