Всплывающая подсказка html при наведении на изображение. Как сделать простые подсказки на CSS3

Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.

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

Решение Способ, который я вам предложу, достаточно прост и эффективен. Работает во всех браузерах, даже в ІЕ 6 (Многократно тестировано мной). Легко изменим и удобен. Не загромождает код и делает его наглядным. Его можно легко изменить по свои нужды. Например, сделать задержку вывода подсказки через setTimeout или другое.HTML Предположим у нас есть HTML-страница со ссылкой, при наведении на которую нам нужно вывести подсказку:
Всплывающие подсказки Ссылка
Как вы уже могли заметить из листинга, я использую css-препроцессор LESS.
Мы подключили в отдельные файлы CSS-стили и скрипты. Еще у нас есть одна ссылка и блок div, который и будет контейнером для подсказки.
Спецификация HTML5 разрешает использовать пользовательские атрибуты типа data-atribute, в которых можно сохранять некую информацию об элементе или блоке. Именно в data-атрибутах мы будем сохранять текст всплывающих подсказок.
Ссылка
Для хранения я использую атрибут data-tooltip.
C HTML закончили - можно перейти к стилям.CSS Я использую библиотеку LESS Elements и всем советую, поэтому некоторые свойства я напишу с использованием данного фреймворка.
@import "css/elements.less"; #tooltip { z-index: 9999; position: absolute; display: none; top:0px; left:0px; background-color: #000; padding: 5px 10px 5px 10px; color: white; .opacity(0.5); .rounded(5px); }
С листинга понятно, что в первой строчке мы подключаем LE, задаем блоку div#tooltip абсолютное позиционирование и скрываем его. Дальше мы задаем блоку фоновый цвет и цвет текста, делаем скругление уголки (5px) и устанавливаем значение прозрачности на 50%.jQuery Ну а теперь самое интересное - jQuery.
$.jQuery(document).ready(function() { $("").mousemove(function (eventObject) { $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip").text($data_tooltip) .css({ "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 }) .show(); }).mouseout(function () { $("#tooltip").hide() .text("") .css({ "top" : 0, "left" : 0 }); }); });// Ready end.
Теперь мы добавляем в выборку все элементы с атрибутом data-tooltip и при наведении на нужный элемент мышью получаем значение подсказки и сохраняем его в переменной. Дальше добавляем текст подсказки в блок #tooltip, задаем ему координаты курсора от края станицы + 5 px и наконец выводим блок с подсказкой в нужном месте. После ухода мыши с элемента мы прячем блок #tooltip, чистим его содержимое и возвращаем в 0;0;.

Вот и все!
В итоге мы получим что-то такое: Демо

Благодаря такому простому скрипту все элементы на странице, у которых будет атрибут data-tooltip, получат подсказку.

Спасибо за внимание!

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

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

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

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

Пример реализации всплывающей подсказки

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

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

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

ССЫЛКА НА ИЗОБРАЖЕНИЕ " alt="подсказка" />ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ

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

СЛОВО ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ

Теперь нужно вставить стили в вашу таблицу стилей 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; /*внутренний отступ*/ }

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

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

В данном уроке мы рассмотрим, как создать простые подсказки с помощью HTML и CSS, которые будут выводить содержание атрибута title для ссылки.

Ссылка на полезный ресурс

Зададим базовый стиль для класса tooltip :

Tooltip{ display: inline; position: relative; }

Теперь подсказка будет выводится в одну строку со ссылкой с использованием относительного позиционирования. Теперь определим скругленные углы для блока подсказки и позиционируем ее сверху ссылки:

Tooltip:hover:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px; }

Мы используем псевдо-класс:hover , который выбирает элемент при наведении на него курсора мыши, и псевдо-класс:after , который добавляет содержание после выбранного элемента. Фон устанавливается частично прозрачным, а для браузеров, которые не поддерживают формат цвета RGBA, устанавливаем серый цвет фона.

Закругленные углы создаются с помощью атрибута border-radius . Цвет текста делаем белым. В завершение, мы позиционируем блок подсказки и добавляем отступ.

Кроме определения стилей и позиционирования задаем свойство content:

Content: attr(title);

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

Ссылка на полезный ресурс

Для завершения нужно добавить стрелочку внизу подсказки. Используем псевдо-класс:before и стили для рамки:

Tooltip:hover:before{ border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; }

Для создания стрелки мы использовали трюк с рамкой:устанавливаем цвет рамки слева и справа прозрачным и управляем шириной рамки. Также стрелка позиционируется под подсказкой.

HTML подсказка — это блок с дополнительной информацией, который появляется при наведении курсора мыши на определенный элемент веб-страницы. Сегодня мы создадим собственную всплывающую подсказку с помощью HTML и CSS :

Посмотреть демо-версию | Скачать исходный код

Мы сможем использовать CSS-подсказки для большинства элементов, таких как ссылки, теги, стилизованный текст и т.д. Нам нужно будет применить к элементу несколько классов и добавить атрибут data- с текстом всплывающей подсказки.

Настройка документа

Нам нужно создать HTML-документ и задать исходную разметку:

Tooltips Demo // контент

Я добавил ссылку на Normalize.css , которая помогает сбросить все стили браузера по умолчанию, и гарантирует, что каждый элемент будет выглядеть одинаково во всех браузерах. В отличие от стандартного сброса CSS Normalize.css не удаляет все стили по умолчанию, так что вам не нужно будет переписывать стиль каждого элемента с нуля.

Я создал div с классом container , в который мы поместим основные примеры всплывающих подсказок HTML . Вот стили для body и класса .container :

body { font-family: "Work Sans", sans-serif; font-size: 1.5em; line-height: 1.4em; font-weight: 700; background-color: #28ABE3; color: #fff; } .container { width: 800px; margin: 100px auto; background: radial-gradient(circle farthest-corner at 400px 250px , #64BBE0 0%, #28ABE3, #28ABE3 95%); }

Я отцентрировал div контейнера, присвоив для margin-left и margin-right значения auto . Также добавил несколько стилей для раздела body , чтобы он выглядел лучше.

Я решил добавить для фона небольшой светлый CSS-градиент . Если браузер не поддерживает CSS-градиенты (это касается в основном IE 8 и 9 ), цвет фона будет переключен обратно на синий по умолчанию (цвет фона раздела body ).

Я буду использовать HTML подсказки при наведении с тегами анкоров, но вы можете назначить классы других встроенных элементов, таких как strong tag или span . Ниже приводится содержимое div контейнера: