Всплывающая подсказка на CSS
Рассмотрим реализацию простой текстовой подсказки, всплывающей при наведении мыши на элемент. Особенностью способа является использование только CSS стилей, без JavaScript кода.
Для элемента, над которым требуется вывести всплывающую подсказку, добавляем атрибут «data-hint». Он должен содержать простую текстовую строку. Использование html тегов недопустимо.
[data-hint] < position: relative; cursor: hint; >[data-hint]::after < opacity: 0; width: max-content; color: #FFFFFF; background-color: rgba(0,0,0,.7); border-radius: 6px; padding: 10px; content: attr(data-hint); font-size: 12px; font-weight: 400; line-height: 1em; position: absolute; top: -5px; left: 50%; transform: translate(-50%, -100%); pointer-events: none; transition: opacity 0.2s; >[data-hint]:hover::afterДля элементов с атрибутом «data-hint» устанавливаем относительное позиционирование и создаём псевдоэлемент «after». Он будет иметь абсолютное позиционирование и содержимое текстовой подсказки.
- opacity: 0 — устанавливаем полную прозрачность;
- width: max-content — ширина вычисляется в зависимости от содержимого;
- transform: translate(-50%, -100%) — центрирование подсказки по горизонтали над основным элементом;
- pointer-events: none — отключаем события мыши над псевдоэлементом;
- transition: opacity 0.2s — плавное изменение прозрачности;
Позиционирование
Для подсказки справа добавляем элементу класс «hint-right»:
Для позиционирования слева добавляем класс «hint-left»:
Аналогично вывод снизу «hint-bottom»:
В примерах используется небольшой отступ «-5px» от основного элемента. В некоторых случаях его можно установить равным нулю.
Кроме предложенного способа можете воспользоваться готовой миниатюрной css библиотекой «Hint.css». Она предлагает аналогичное решение, но в другом оформлении.
Hint.css — подсказки на чистом CSS3 и HTML5
Подсказки для html элементов не вызывают больших трудностей в использовании у веб-разработчиков. Нужно всего лишь приметить атрибут title и мы получим вывод подсказки при наведении. Стиль такой подсказки будет зависеть от браузера пользователя и не отличаться красотой. Поэтому веб-разработчики придумали массу вариантов как сделать более привлекательные и функциональные решения. Реализовать эксклюзивные подсказки можно по-разному. Большинство использует в своих проектах javascript, но если знания javascript хромают можно легко обойтись и css3 альтернативой.
Hint.css — удобная библиотека для создания подсказок
Существует много библиотек для создания подсказок. Одна из таких hint.css, разработанная Kashagra Gour.
Использования этой библиотеки не вызовет проблем даже у начинающего веб-разработчика, а более опытные смогут легко расширить библиотеку собственными цветовыми и анимационными вариантами.
Использование
Использовать подсказки очень просто. Для начала нужно скачать саму библиотеку отсюда и подключить к документу. Чтобы отобразить подсказку, вам надо будет добавить как минимум 2 последовательных класса к выбранному элементу. Первый класс всегда должен называться hint – он будет изначально запускать таблицы стилей, а второй будет определять расположение подсказки, и отвечать за ее визуальное представление. Вы можете добавить сколько вам угодно классов и комбинаций.
На данный момент Hint.css имеет в арсенале определения ‘hint—top’ — для подсказок над, ‘hint—bottom’ — для подсказок под, ‘hint—left’ — для подсказок слева и ‘hint—right’ — для подсказок справа. Более того, существует определение цветов для большинства статусов сообщений, включая ‘hint—error’, ‘hint—info’, ‘hint—warning’ и ‘hint—success’. Если вы хотите, чтобы ваши подсказки всегда оставались видимыми – то есть, чтобы их не надо было запускать только при наведении курсора, – вам нужно добавить класс ‘hint—always’.
Следующий атрибут данных, ‘data-hint’, отвечает за то, какой текст будет отображаться при наведении.
Пример
Создадим подсказку для ссылки. Для этого будем использовать информационную подсказку hint—info и положения снизу hint—bottom. Вот пример кода:
И мы получим такой результат:
Увидеть демо можно здесь.
Hint.css — подсказки на чистом CSS3 и HTML5
Подсказки для html элементов не вызывают больших трудностей в использовании у веб-разработчиков. Нужно всего лишь приметить атрибут title и мы получим вывод подсказки при наведении. Стиль такой подсказки будет зависеть от браузера пользователя и не отличаться красотой. Поэтому веб-разработчики придумали массу вариантов как сделать более привлекательные и функциональные решения. Реализовать эксклюзивные подсказки можно по-разному. Большинство использует в своих проектах javascript, но если знания javascript хромают можно легко обойтись и css3 альтернативой.
Hint.css — удобная библиотека для создания подсказок
Существует много библиотек для создания подсказок. Одна из таких hint.css, разработанная Kashagra Gour.
Использования этой библиотеки не вызовет проблем даже у начинающего веб-разработчика, а более опытные смогут легко расширить библиотеку собственными цветовыми и анимационными вариантами.
Использование
Использовать подсказки очень просто. Для начала нужно скачать саму библиотеку отсюда и подключить к документу. Чтобы отобразить подсказку, вам надо будет добавить как минимум 2 последовательных класса к выбранному элементу. Первый класс всегда должен называться hint – он будет изначально запускать таблицы стилей, а второй будет определять расположение подсказки, и отвечать за ее визуальное представление. Вы можете добавить сколько вам угодно классов и комбинаций.
На данный момент Hint.css имеет в арсенале определения ‘hint—top’ — для подсказок над, ‘hint—bottom’ — для подсказок под, ‘hint—left’ — для подсказок слева и ‘hint—right’ — для подсказок справа. Более того, существует определение цветов для большинства статусов сообщений, включая ‘hint—error’, ‘hint—info’, ‘hint—warning’ и ‘hint—success’. Если вы хотите, чтобы ваши подсказки всегда оставались видимыми – то есть, чтобы их не надо было запускать только при наведении курсора, – вам нужно добавить класс ‘hint—always’.
Следующий атрибут данных, ‘data-hint’, отвечает за то, какой текст будет отображаться при наведении.
Пример
Создадим подсказку для ссылки. Для этого будем использовать информационную подсказку hint—info и положения снизу hint—bottom. Вот пример кода:
И мы получим такой результат:
Увидеть демо можно здесь.
Как добавить всплывающую подсказку к тексту?
Всплывающая подсказка — это небольшой блок с текстом, который появляется при наведении курсора мыши на какой-либо элемент веб-страницы (рис. 1). Подсказка чаще всего используется для вывода дополнительной информации об элементе, на который указывает курсор. Как только курсор убирается с элемента, исчезает и сама подсказка.
Рис. 1. Вид всплывающей подсказки
Самый простой способ сделать такую подсказку — это добавить к нужному элементу атрибут title с желаемым текстом (пример 1).
Пример 1. Использование атрибута title
Диамат — материалистическая интерпретация диалектики Гегеля.
Атрибут title выводит подсказку, вид которой задаётся браузером, и не может быть изменён через CSS. Чтобы сделать подсказку со своим собственным стилем, надо к элементу добавить пользовательский атрибут (такие атрибуты начинаются на data- , например, data-title ) и уже для него задать свой стиль.
Стиль самого элемента определяется с помощью селектора [data-title] , он выбирает все те элементы, у которых есть пользовательский атрибут data-title .
Для самого элемента устанавливаем относительное позиционирование через свойство position. Оно нужно, чтобы в дальнейшем управлять положением подсказки относительно текста. Также дополнительно можно поменять вид курсора мыши.
Вывод подсказки делаем через псевдоэлемент ::after (или ::before, что в данном случае равнозначно), который добавляется к нашему селектору [data-title] . Чтобы вывести текст из значения атрибута, используем свойство content со значением attr(data-title) .
Теперь надо настроить положение подсказки и её стиль. Для этого делаем её абсолютно позиционированной, что в сочетании с относительным положением у родителя позволяет настраивать положение псевдоэлемента. К примеру, чтобы вывести подсказку ниже текста ставим ей свойство top со значением 1em .
Чтобы вывести подсказку выше текста, меняем свойство top на bottom.
Учтите, что если нет свободного места для подсказки, то она может быть выведена за пределами окна браузера.
Осталось задать остальной стиль подсказки (цвет, фон и др.) и спрятать её через свойство opacity.
Для отображения подсказки применяем псевдокласс :hover, добавляя его к нашему селектору. Внутри используем единственное свойство opacity .
Окончательный под показан в примере 2.
Пример 2. Использование пользовательского атрибута
Данный метод позволяет гибко настраивать вид подсказки и добавлять её к любым элементам.
См. также
- :focus на мобильных устройствах
- content
- opacity
- quotes
- relative и absolute
- Аккордеон меню
- Анимация ссылок при наведении
- Атрибут title
- Атрибуты ссылок
- Виды ссылок
- Всплывающая подсказка
- Добавление тени
- Использование :hover
- Не только текст
- Нормальное позиционирование
- Очистка float
- Переходы с помощью :hover
- Подробнее о позиционировании
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Псевдоэлемент ::after
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Работа с типографикой
- Селекторы CSS
- Состояния кнопок
- Сочетание с псевдоклассами
- Типы ссылок