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

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

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

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

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

HTML5 IE Cr Op Sa Fx

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

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

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

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

HTML5 CSS3 IE Cr Op Sa Fx

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

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

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

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

HTML5 CSS3 IE Cr Op Sa Fx

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

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

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

Источник

Как создается всплывающая подсказка с помощью HTML и CSS

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

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

Вот некоторые из недостатков применения всплывающих подсказок:

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

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

Метод с использованием HTML

Самый простой добавления всплывающих подсказок – атрибут title.

Посмотрите на пример, приведенный ниже.

Если вы хотите увидеть подсказку, просто наведите указатель мыши на ссылку. title — это глобальный атрибут, который можно добавлять к любому элементу HTML.

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

Метод с использованием CSS

Другой способ заключается в использовании CSS для отображения всплывающей подсказки. Он позволяет настраивать внешний вид подсказки и даже использовать изображения.

Вот HTML-код предыдущего примера.

Для реализации нового способа используется CSS-свойство content и псевдоэлемент :after.

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

Этот способ отображения всплывающей подсказки использует большое количество различных функций: свойство content, псевдоэлемент ::after, positionfor::after и т. д. Но если пользователь применяет устаревший браузер, то всплывающая подсказка не будет отображаться корректно.

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

CSS для всплывающей подсказки с изображением выглядит следующим образом:

Если веб-страница работает на основе HTML5, вы можете воспользоваться новыми пользовательскими атрибутами данными. Они позволяет реализовать подсказку в HTML-коде, а не в CSS. В этом случае подсказки являются контентом, а не стилем CSS.

Код примера на HTML5:

Демонстрация: всплывающая подсказка с использованием пользовательских атрибутов данных HTML5:

Но этот способ не будет работать в устаревших браузерах. А также в программах чтения с экрана.

Объяснение примеров кода на CSS

Часть :hover приведенного выше селектора означает, что стилевые правила применяются только тогда, когда курсор мыши наводится на элемент. Псевдоэлемент ::after гарантирует, что стили применяются к последнему дочернему элементу (который создается этими правилами) текущего элемента.

Чтобы всплывающая подсказка появлялась рядом с элементом, над которым находится указатель мыши, я использовал несколько приемов. Я установил для исходного элемента относительное позиционирование (position: relative). Это делает его точкой отсчета для position: absolute дочернего псевдоэлемента.

Затем всплывающая подсказка помещается на 1.1em ниже ссылки. Это смещает ее чуть ниже слов, чтобы она не закрывала их. А также на 1em вправо, чтобы подсказка смещалась примерно на 1 символ в сторону.

Всплывающая подсказка, реализованная таким образом, по функциональности уступает атрибуту title. Она всегда будет отображаться только в указанном вами месте, даже если это приводит к ее усечению.

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

Я также присвоил значение z-index 1, чтобы всплывающая подсказка отображалась над существующим содержимым.

Остальная часть CSS-кода предназначена для управления внешним видом всплывающей подсказки и включает в себя обычные свойства padding, border и width.

Свойство content содержит саму всплывающую подсказку. Если вы хотите использовать изображение, замените текст URL-адресом этого изображения.

В примере на HTML5 создается пользовательский атрибут данных с именем «data-tooltip» и присваивается ему некоторый текст.

Затем текст вставляется в контент с помощью функции CSS attr(). Проще говоря, attr(data-tooltip) принимает значение атрибута data-tooltip и заменяет его текстом.

Вместо заключения

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

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

Дайте знать, что вы думаете по этой теме материала в комментариях. За комментарии, лайки, подписки, отклики, дизлайки низкий вам поклон!

Вадим Дворников автор-переводчик статьи « How to Add a Tooltip in HTML/CSS (No JavaScript Needed) »

Источник

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

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

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

Решение

Способ, который я вам предложу, достаточно прост и эффективен. Работает во всех браузерах, даже в ІЕ 6 (Многократно тестировано мной). Легко изменим и удобен. Не загромождает код и делает его наглядным. Его можно легко изменить по свои нужды. Например, сделать задержку вывода подсказки через setTimeout или другое.

Предположим у нас есть HTML-страница со ссылкой, при наведении на которую нам нужно вывести подсказку:

Как вы уже могли заметить из листинга, я использую css-препроцессор LESS.
Мы подключили в отдельные файлы CSS-стили и скрипты. Еще у нас есть одна ссылка и блок div, который и будет контейнером для подсказки.
Спецификация HTML5 разрешает использовать пользовательские атрибуты типа data-atribute, в которых можно сохранять некую информацию об элементе или блоке. Именно в data-атрибутах мы будем сохранять текст всплывающих подсказок.

Для хранения я использую атрибут data-tooltip.
C HTML закончили — можно перейти к стилям.

Я использую библиотеку LESS Elements и всем советую, поэтому некоторые свойства я напишу с использованием данного фреймворка.

С листинга понятно, что в первой строчке мы подключаем LE, задаем блоку div#tooltip абсолютное позиционирование и скрываем его. Дальше мы задаем блоку фоновый цвет и цвет текста, делаем скругление уголки (5px) и устанавливаем значение прозрачности на 50%.

jQuery

Ну а теперь самое интересное — jQuery.

Теперь мы добавляем в выборку все элементы с атрибутом data-tooltip и при наведении на нужный элемент мышью получаем значение подсказки и сохраняем его в переменной. Дальше добавляем текст подсказки в блок #tooltip, задаем ему координаты курсора от края станицы + 5 px и наконец выводим блок с подсказкой в нужном месте. После ухода мыши с элемента мы прячем блок #tooltip, чистим его содержимое и возвращаем в 0;0;.

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

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

Источник

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

Всплывающей подсказкой называется блок с текстом, который появляется при наведении на элемент веб-страницы (рис. 1). Цель такой подсказки — дать более подробную информацию о содержимом элемента. К примеру, для ссылок подсказкой может служить адрес ссылки или краткое описание сайта, на который ведёт ссылка.

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

Для создания подсказки в HTML добавим к нужному элементу пользовательский атрибут data-tooltip с текстом подсказки.

Вывод текста и его оформление дальше возлагается на CSS. Само отображение содержимого атрибута происходит через свойство content. Добавляем его к псевдоэлементу ::after, который привязываем к селектору [data-tooltip] — это позволяет создавать подсказку для любого элемента.

Цвет фона, текста, размеры и положение подсказки также задаются в ::after . Заодно скрываем подсказку, делая её прозрачной через свойство opacity.

Там же устанавливаем и время перехода с помощью свойства transition.

Псевдоэлемент ::after является частью своего родителя, так что :hover начинает срабатывать при наведении не на саму строку, а на невидимую подсказку. Предотвратить взаимодействие курсора мыши с подсказкой можно с помощью свойства pointer-events со значением none .

Чтобы подсказка отображалась, плавно становясь непрозрачной, добавим к :hover свойство opacity со значением 1.

Сюда же можно добавить и другие свойства, вроде left и top . Тогда подсказка будет не только становиться видимой, но и немного перемещаться. В примере 1 показан окончательный код для создания всплывающей подсказки при наведении на абзац.

Источник

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

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

• 

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Анимация фона при прокрутке страницы

Анимируем SVG фигуры при прокрутке страницы.

Пример 3D помещения выставки

Экспериментальная 3D проекция помещения галереи.

Источник