Всплывающие подсказки средствами CSS

Сегодня мы будем создавать всплывающие подсказки с использованием чистого CSS (Cascading Style Sheets). Подсказки нужны для вывода небольшого блока с текстом, информирующего посетителей об определенном элементе вашего сайта. Чтобы просмотреть пример всплывающей подсказки- наведите на эту Етить колотить! Это же всплывающая подсказка!ссылку.

1. Первое, что нам понадобится- это элемент, к которому мы прикрутим подсказку- например, ссылка. В документе HTML вставим строку:

   <a href="#" class="tooltip"><span>а это текст подсказки</span>это элемент</a>

2. При наведении мыши на наш созданный элемент без помощи средств CSS ничего происходить не будет. В style.css или прямо в документе HTML между тегами style создайте стили:

   .tooltip { position:relative; z-index:24; }
   .tooltip span { display:none;}
   .tooltip:hover {z-index:25;}
   .tooltip:hover span {
   display:block;
   position:absolute;
   width:120px;
   top:25px;
   left:20px;
   background-color:#FCFBDC;
   border:1px solid #333333;
   padding:5px;
   font-size:11px;
   color:#333333;
   text-decoration:none;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   }

В результате получается а это текст подсказкиэто элемент. Можно подредактировать цвет, размер, шрифт- достаточно простых знаний CSS.
———
Быстрое и качественное создание сайта в Одессе. Проблемы со связью? Вам поможет аутсорсинг ит- методы снижения общей стоимости владения информационной системой. Новая акция- купив garmin gps ты получаешь ноутбук!

стили

(средняя оценка 4.11 из 5)

Просмотров: 4,423