Как добавить всплывающую подсказку к тексту?
Всплывающая подсказка — это небольшой блок с текстом, который появляется при наведении курсора мыши на какой-либо элемент веб-страницы (рис. 1). Подсказка чаще всего используется для вывода дополнительной информации об элементе, на который указывает курсор. Как только курсор убирается с элемента, исчезает и сама подсказка.
Рис. 1. Вид всплывающей подсказки
Самый простой способ сделать такую подсказку — это добавить к нужному элементу атрибут title с желаемым текстом (пример 1).
Пример 1. Использование атрибута title
Диамат — материалистическая интерпретация диалектики Гегеля.
Атрибут title выводит подсказку, вид которой задаётся браузером, и не может быть изменён через CSS. Чтобы сделать подсказку со своим собственным стилем, надо к элементу добавить пользовательский атрибут (такие атрибуты начинаются на data- , например, data-title ) и уже для него задать свой стиль.
Стиль самого элемента определяется с помощью селектора [data-title] , он выбирает все те элементы, у которых есть пользовательский атрибут data-title .
Для самого элемента устанавливаем относительное позиционирование через свойство position. Оно нужно, чтобы в дальнейшем управлять положением подсказки относительно текста. Также дополнительно можно поменять вид курсора мыши.
[data-title] < position: relative; /* Относительное позиционирование */ cursor: help; /* Меняем курсор на справочный */ >Вывод подсказки делаем через псевдоэлемент ::after (или ::before, что в данном случае равнозначно), который добавляется к нашему селектору [data-title] . Чтобы вывести текст из значения атрибута, используем свойство content со значением attr(data-title) .
[data-title]::after < content: attr(data-title); /* Выводим текст из атрибута data-title */ >Теперь надо настроить положение подсказки и её стиль. Для этого делаем её абсолютно позиционированной, что в сочетании с относительным положением у родителя позволяет настраивать положение псевдоэлемента. К примеру, чтобы вывести подсказку ниже текста ставим ей свойство top со значением 1em .
[data-title]::after < content: attr(data-title); /* Выводим текст из атрибута data-title */ position: absolute; /* Абсолютное позиционирование */ left: 0; top: 1em; /* Подсказка снизу */ >Чтобы вывести подсказку выше текста, меняем свойство top на bottom.
[data-title]::after < content: attr(data-title); /* Выводим текст из атрибута data-title */ position: absolute; /* Абсолютное позиционирование */ left: 0; bottom: 1em; /* Подсказка снизу */ >Учтите, что если нет свободного места для подсказки, то она может быть выведена за пределами окна браузера.
Осталось задать остальной стиль подсказки (цвет, фон и др.) и спрятать её через свойство opacity.
[data-title]::after < content: attr(data-title); /* Выводим текст из атрибута data-title */ position: absolute; /* Абсолютное позиционирование */ left: 0; top: 1em; /* Положение подсказки */ opacity: 0; /* Скрываем подсказку, делая её прозрачной */ >Для отображения подсказки применяем псевдокласс :hover, добавляя его к нашему селектору. Внутри используем единственное свойство opacity .
[data-title]:hover::after < opacity: 1; /* Показываем подсказку */ >Окончательный под показан в примере 2.
Пример 2. Использование пользовательского атрибута
Данный метод позволяет гибко настраивать вид подсказки и добавлять её к любым элементам.
См. также
- :focus на мобильных устройствах
- content
- opacity
- quotes
- relative и absolute
- Аккордеон меню
- Анимация ссылок при наведении
- Атрибут title
- Атрибуты ссылок
- Виды ссылок
- Всплывающая подсказка
- Добавление тени
- Использование :hover
- Не только текст
- Нормальное позиционирование
- Очистка float
- Переходы с помощью :hover
- Подробнее о позиционировании
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Псевдоэлемент ::after
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Работа с типографикой
- Селекторы CSS
- Состояния кнопок
- Сочетание с псевдоклассами
- Типы ссылок
Альтернативный текст и всплывающая подсказка
Можно ли изменить вид всплывающей подсказки?
Всплывающая подсказка, добавляемая к изображениям через атрибут title тега , является системным элементом, поэтому вид подсказки зависит от используемого браузера, операционной системы и ее настроек. Хотя напрямую изменить оформление подсказки нельзя, допустимо пойти обходным путем и имитировать всплывающую подсказку с помощью JavaScript.
Как добавить всплывающую подсказку к изображению?
Всплывающая подсказка обычно используется для краткого комментирования содержания изображений и появляется при наведении на картинку курсора мыши. Добавление такой подсказки происходит с помощью атрибута title тега . В качестве значения указывается текстовая строка, заключенная в кавычки.
Добавил к рисунку альтернативный текст, но его не видно в браузере. Почему?
Альтернативный текст используется для описания содержимого картинки, когда само изображение недоступно. При этом альтернативный текст не должен напрямую отображаться в браузере. Исключением является Internet Explorer, в котором он появляется в виде всплывающей подсказки. Проверить вид и корректность альтернативного текста легко, достаточно отключить показ картинок в браузере.
Для чего нужен альтернативный текст?
Альтернативный текст показывается на месте изображения в момент его загрузки или недоступности. В общем, в те моменты, когда картинка по каким-либо причинам не видна. Обычно это случается, если пользователь отключил показ изображений в браузере или при медленном соединении с сайтом. Альтернативный текст добавляется через атрибут alt тега и является обязательным согласно спецификации HTML и XHTML.
Всплывающая подсказка
Всплывающей подсказкой называется блок с текстом, который появляется при наведении на элемент веб-страницы (рис. 1). Цель такой подсказки — дать более подробную информацию о содержимом элемента. К примеру, для ссылок подсказкой может служить адрес ссылки или краткое описание сайта, на который ведёт ссылка.
Рис. 1. Вид всплывающей подсказки
Для создания подсказки в HTML добавим к нужному элементу пользовательский атрибут data-tooltip с текстом подсказки.
Вывод текста и его оформление дальше возлагается на CSS. Само отображение содержимого атрибута происходит через свойство content. Добавляем его к псевдоэлементу ::after, который привязываем к селектору [data-tooltip] — это позволяет создавать подсказку для любого элемента.
[data-tooltip]::after < content: attr(data-tooltip); /* Выводим текст */ >Цвет фона, текста, размеры и положение подсказки также задаются в ::after . Заодно скрываем подсказку, делая её прозрачной через свойство opacity.
[data-tooltip]::after
Там же устанавливаем и время перехода с помощью свойства transition.
[data-tooltip]::after
Псевдоэлемент ::after является частью своего родителя, так что :hover начинает срабатывать при наведении не на саму строку, а на невидимую подсказку. Предотвратить взаимодействие курсора мыши с подсказкой можно с помощью свойства pointer-events со значением none .
[data-tooltip]::after
Чтобы подсказка отображалась, плавно становясь непрозрачной, добавим к :hover свойство opacity со значением 1.
[data-tooltip]:hover::after
Сюда же можно добавить и другие свойства, вроде left и top . Тогда подсказка будет не только становиться видимой, но и немного перемещаться. В примере 1 показан окончательный код для создания всплывающей подсказки при наведении на абзац.
Пример 1. Создание подсказки
См. также
- :focus на мобильных устройствах
- attr()
- pointer-events
- transition
- Анимация кнопок при наведении
- Анимация ссылок при наведении
- Атрибут title
- Виды ссылок
- Использование :hover
- Нормальное позиционирование
- Переходы
- Переходы и анимация
- Переходы с помощью :hover
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Селекторы CSS
- Состояния кнопок
- Сочетание с псевдоклассами
- Типы ссылок
Как добавить всплывающую подсказку к изображению?
Добавить всплывающую подсказку к изображению, которая появляется при наведении на него курсора мыши.
Решение
Всплывающая подсказка обычно используется для краткого комментирования содержания изображений и появляется при наведении курсора мыши на картинку. Добавление такой подсказки происходит с помощью атрибута title тега . В качестве значения указывается текстовая строка, заключенная в кавычки. В примере 1 показано добавление всплывающей подсказки к рисунку.
Пример 1. Всплывающая подсказка
HTML5 IE Cr Op Sa Fx
Всплывающая подсказка Результат данного примера показан на рис. 1.
Рис. 1. Вид всплывающей подсказки в браузере
Оформление всплывающей подсказки зависит от браузера и настроек операционной системы и не может быть изменено напрямую.