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

Здравствуйте, уважаемые друзья. На днях один из моих заказчиков обратился ко мне с просьбой доработать его сайт. А точнее, сделать новую форму заявки на сайте, так как старая форма сменилась.

А ещё он попросил прикрутить к каждому полю формы всплывающую подсказку. Вы, наверное, такие подсказки видели, когда подводишь курсор мышки на изображение или на слово, то появляется всплывающая подсказка.

Вариантов реализовать такие подсказки, конечно, предостаточно. Я, естественно, ориентируясь на минимизацию нагрузки на сервер, решил сделать всплывающие подсказки с помощью HTML и CSS. Это довольно просто и нисколечко не нагружает сервер.

А вид такой подсказки зависит только от вашего умения и фантазии. В форме заказчика, я реализовал это в виде изображения со знаком вопроса, рядом с полем для ввода, наведя курсор на который появляется подсказка.

Ну, в общем, всё это я сделал, клиент остался доволен. А я решил поделиться этим методом создания всплывающих подсказок с вами, мои друзья.

Как создать всплывающею подсказку

Итак, весь процесс займёт у вас не более 5 минут. Для начала нужно определиться, как будет выглядеть объект, привлекающий внимание. То есть это может быть изображение Так выглядит простая всплывающая подсказка, созданная с помощью CSS стилей. И привязанная к изображении. или слово (словосочетание)А это всплывающая подсказка, привязанная к отдельному слову..

Шаг 1.

Чтобы привязать всплывающую подсказку к изображению, это изображение нужно сначала оптимизировать, а потом загрузить на ваш сайт. Думаю, останавливаться на этом нет смысла. Далее, в том месте, где хотите вывести это изображении и подсказку соответственно, вставляете это код:

<a class="help" href="#"><img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ" alt="подсказка" /><span class="airhelp">ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ</span></a>

Если же это слово или фраза, то необходимо вставить вот этот код, в том месте, где требуется вывод подсказки.

<a class="help" href="#">СЛОВО<span class="airhelp">ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ</span></a>

Шаг 2.

Теперь нужно вставить стили в вашу таблицу стилей CSS, в большинстве случаев это файл style.css.

Открываете административную панель WP — «Внешний вид» — «Редактор» — «Таблица стилей» и вставляете в самом конце вот эти стили.

.help {
color: #2C8505; outline: none; /*цвет подсказки*/
cursor: help; text-decoration: none; /*вид курсора при наведении, можно заменить на pointer*/
position: relative; /*позиция*/
}

/*положение всплывающей подсказки*/
.help span {
margin-left: -999em;
position: absolute;
}

/*подсказка при наведении курсора*/
.help:hover span {
font-family: Verdana, Tahoma, Geneva, sans-serif; /*шрифт*/
position: absolute; /*позиция*/
left: 10px;
top: 25px;
z-index: 99;
margin-left: 0;
width: 200px; /*ширина блока подсказки*/
}

/*параметры изображения*/
.help:hover img {
border: 0;
}

/*блок всплывающей подсказки*/
.airhelp {
background: none repeat scroll 0 0 rgba(97, 177, 255, 0.9); /*цвет и прозрачность фона*/
border: 1px solid #2b82b8; /*параметры бордюра*/
border-radius: 5px; /*закругление углов*/
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); /*тень блока*/
color: #fff; /*цвет шрифта всплывающей подсказки*/
padding: 5px; /*внутренний отступ*/
}

Как видите, я сделал для вас подсказки. Вам лишь остаётся сделать изменения под ваш дизайн и можно наслаждаться всплывающими подсказками. А если вашим посетителям приходится что-то заполнять, регистрироваться на сайте или выполнять какие-то действия, то подсказки вам просто необходимы. А ваши посетители будут вам премного благодарны.

Ну, что ж друзья, вот таким вот простым способом вы можете реализовать всплывающие подсказки на любом вашем проекте. А у меня на сегодня всё, желаю вам удачи и до встречи в следующих статьях.

P.S. и не забудьте посмотреть видеоурок.

С уважением, Максим Зайцев.