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


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

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

Вариантов реализовать такие подсказки, конечно, предостаточно. Я, естественно, ориентируясь на минимизацию нагрузки на сервер, решил сделать всплывающие подсказки с помощью 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. и не забудьте посмотреть видеоурок.

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



Если статья оказалась для Вас полезной, поделитесь с друзьями, жмите на кнопочки:


Подписывайтесь на новые статьи!


Оставьте комментарий

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

8 коммент. к статье “Всплывающие подсказки с помощью CSS

  • Павел Пашкан

    Отличная статья! Теперь посетителям многих российских блогов будет намного легче пользоваться сайтом, и понять его контент)))

    • Максим Зайцев От автора

      Но если посетителям не понятен контент, то и всплывающие подсказки не помогут.

  • Виктория

    Ага, как в точку:) На днях письмо такое читала в одной из рассылок — три раза перечитала один абзац, но так и не поняла, что автор хотел сказать:)

    • Максим Зайцев От автора

      Точно, Вика. Наша задача, прежде всего, доходчиво и понятно объяснить всё своим читателя. И тут мы стараемся как можем 🙂

  • Пётр

    Максим хороший интересный урок .Спасибо. Помоги пожалуйста не могу разобраться как увеличить ширину всплывающей подсказки. И хотелось бы как то выделить слово которое нуждается в подсказке . Куда вставить тег чтобы оно было например коасным.

    • Максим Зайцев От автора

      Здравствуйте, Пётр. В приведённых стилях есть и ширина блока подсказки, она подписана и имеет ширину в 200рх. Посмотрите внимательно. Для того чтобы сделать слово подсказку цветом можно добавить стиль .help a {color: #FE1E03; font-weight: bold;} Стиль font-weight делает текст жирным. Добавьте эти стили в файл style.css и регулируйте как надо. Желаю удачи. Будут вопросы, пишите.

  • Андрей

    Максим, как всплывающее окно расположить в центре экрана независимо от его разрешения?

    • Максим Зайцев От автора

      Здравствуйте, Андрей. Самый простой способ, присвоить класс блоку всплывающего окна, а к нему стили позиционирования, то есть отступ от верхнего края position: absolute; top: 100px;. И выравнивание по горизонтали через margin: 0 auto;