Css фриланс всплывающая подсказка img. Создание простых всплывающих подсказок на HTML5, CSS и jQuery

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

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

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

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

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

Влад Мержевич

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

В качестве примера я выбрал фотографии, при наведении на них курсора мыши показывается название фотографии. Сам вывод текста будем делать при помощи свойства content и брать значение текста из какого-либо атрибута через attr() . К сожалению, content не будет работать желаемым образом в сочетании с img , поэтому фотографии вставляются в элемент , к которому добавляем атрибут data-title с текстом всплывающей подсказки. Есть соблазн вставить атрибут title и задействовать его, но в таком случае будет выводиться одновременно две подсказки: одна «родная», а вторая наша. Так что мы используем свой собственный атрибут data-title , благо HTML5 позволяет это делать. Таким образом получим следующий код (пример 1).

Пример 1. Код HTML

HTML5 IE Cr Op Sa Fx

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

Переходим к стилю нашей подсказки. Вначале надо сделать, чтобы она вообще появлялась. Для этого воспользуемся псевдоэлементом ::after , к которому добавляем content: attr(data-title) .

Photo::after { content: attr(data-title); }

Получится, что после содержимого элемента с классом photo будет выводиться текст из атрибута data-title , что нам и требовалось. Но поскольку всплывающая подсказка должна появляться только при наведении на фотографию курсора мыши, добавим ещё псевдокласс :hover .

Photo:hover::after { content: attr(data-title); }

Остаётся только задать желаемый стиль нашей подсказки, в частности, положение, цвет фона, текста, рамку и др. (пример 2).

Пример 2. Стиль подсказки

HTML5 CSS3 IE Cr Op Sa Fx

Всплывающая подсказка на CSS .photo { display: inline-block; /* Строчно-блочный элемент */ position: relative; /* Относительное позиционирование */ } .photo:hover::after { content: attr(data-title); /* Выводим текст */ position: absolute; /* Абсолютное позиционирование */ left: 20%; top: 30%; /* Положение подсказки */ z-index: 1; /* Отображаем подсказку поверх других элементов */ background: rgba(255,255,230,0.9); /* Полупрозрачный цвет фона */ font-family: Arial, sans-serif; /* Гарнитура шрифта */ font-size: 11px; /* Размер текста подсказки */ padding: 5px 10px; /* Поля */ border: 1px solid #333; /* Параметры рамки */ }

Результат данного примера показан на рис. 1.

Рис. 1. Вид всплывающей подсказки

Положение подсказки не зависит от позиции курсора, она появляется в одном и том же месте при наведении курсора на изображение. Можно сделать, чтобы подсказка выводилась в нижней части фотографии, так она не будет закрывать большую часть картинки. Стиль при этом поменяется незначительно (пример 3).

Пример 3. Вывод подсказки внизу фотографии

HTML5 CSS3 IE Cr Op Sa Fx

Всплывающая подсказка на CSS .photo { display: inline-block; /* Строчно-блочный элемент */ position: relative; /* Относительное позиционирование */ } .photo:hover::after { content: attr(data-title); /* Выводим текст */ position: absolute; /* Абсолютное позиционирование */ left: 0; right: 0; bottom: 5px; /* Положение подсказки */ z-index: 1; /* Отображаем подсказку поверх других элементов */ background: rgba(0,42,167,0.6); /* Полупрозрачный цвет фона */ color: #fff; /* Цвет текста */ text-align: center; /* Выравнивание текста по центру */ font-family: Arial, sans-serif; /* Гарнитура шрифта */ font-size: 11px; /* Размер текста подсказки */ padding: 5px 10px; /* Поля */ border: 1px solid #333; /* Параметры рамки */ }

Результат данного примера показан на рис. 2.

Рис. 2. Вид всплывающей подсказки

К сожалению, свойство transition , с помощью которого можно сделать анимацию подсказки, не работает с псевдоэлементами. Поэтому придётся довольствоваться резким появлением нашей всплывающей подсказки. Также не будет никакого эффекта в браузере IE8 и младше, эта версия не поддерживает ::after . Впрочем, если заменить этот псевдоэлемент на :after , то можно получить более-менее работающий вариант.

или какие HTML элементы могут иметь всплывающие подсказки

Глава содержит примеры всплывающих подсказок из области Гипертекстовой разметки.

В меню слева вы найдете современные и очень подробные уроки по HTML.

Они позволят вам создать свой сайт с чистого листа , а пока смотрим немного ниже.

В данной главе мы рассмотрим

Прежде, чем приступить к HTML подсказкам , предлагаю прочитать информацию.

Это может быть интересно.

Основные тенденции раннего интернета

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

Здесь все почти тоже самое: атрибут title="" определяет всплывающую HTML подсказку .

alt="" изображения определяет альтернативный текст, который будет показан на странице, если не отобразится картинка.

Не стоит путать HTML подсказку и альтернативный текст, так как это совершенно различные вещи.

HTML подсказка применяется практически ко всем элементам страницы.

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